SyntaxError: 'import' и 'export' могут отображаться только с 'sourceType: module' - Подождите, что?

Итак, рассмотрим следующие два файла:

app.js

import Game       from './game/game';
import React      from 'react';
import ReactDOM   from 'react-dom';

export default (absPath) => {
  let gameElement = document.getElementById("container");

  if (gameElement !== null) {
      ReactDOM.render(
          <Game mainPath={absPath} />,
          gameElement
      );
  }
}

index.js

import App from './src/app';

gulpfile.js

var gulp        = require('gulp');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var babelify    = require("babelify");
var watch       = require('gulp-watch');

gulp.task('make:game', function(){
  return browserify({
    entries: [
      'index.js'
    ]
  })
  .transform('babelify')
  .bundle()
  .pipe(source('index.js'))
  .pipe(gulp.dest('app/'));
});

Ошибка:

gulp make:game
[13:09:48] Using gulpfile ~/Documents/ice-cream/gulpfile.js
[13:09:48] Starting 'make:game'...

events.js:154
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

Мне жаль, что? Что это за ошибка? Что я делаю неправильно?

ОТВЕТЫ

Ответ 1

Старые версии Babel пришли со всем из коробки. В более новой версии вам необходимо установить какие-либо плагины, которые вам нужны. Во-первых, вам нужно установить предустановку ES2015.

npm install babel-preset-es2015 --save-dev

Затем вам нужно сообщить babelify, чтобы использовать установленный вами пресет.

return browserify({ ... })
  .transform(babelify.configure({
    presets: ["es2015"]
  }))
  ...

Источник

Ответ 2

ESLint изначально не поддерживает это, потому что это противоречит спецификации. Но если вы используете анализатор babel-eslint, то внутри вашего конфигурационного файла eslint вы можете сделать это:

{
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true
  }
}

Ответ 3

Для корректной компиляции кода es2015-response вам необходимо установить несколько узловых модулей:

глобально

npm install -g browserify

в каталоге вашего приложения:

npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-stage-0 babel-preset-react

Затем создайте задание глотка:

    var browserify = require("browserify");
    var babelify = require("babelify");

    gulp.task('es6-compile', function() {
      browserify({ debug: true })
        .transform(babelify.configure({ presets: ["es2015","react", "stage-0"] }))
        .require("./public/src/javascripts/app.js", { entry: true })
        .bundle()
        .pipe(gulp.dest('./public/dest/javascripts'));
    });

В каталоге. /public/dest/javascripts вы найдете скомпилированный файл es5 app.js.

Ответ 4

Я столкнулся с той же ошибкой, пытаясь импортировать модуль из node_modules который экспортирует в стиле ES6. Ничто из того, что было предложено на SO, не помогло мне. Тогда я нашел раздел часто задаваемых вопросов о репо babelify. Согласно полученному node_modules, ошибка появляется, поскольку модули из node_modules по умолчанию не переносятся, а объявления ES6, такие как export default ModuleName в них, не понимаются узлом, работающим на модулях в стиле Common.js.

Итак, я обновил свои пакеты, а затем использовал global опцию, чтобы запустить babelify как глобальное преобразование, исключая все модули узлов, кроме того, который меня заинтересовал, как указано на странице репозитория babelify:

...    
browserify.transform("babelify", 
    {
        presets: ["@babel/preset-env"], 
        sourceMaps: true, 
        global: true, 
        ignore: [/\/node_modules\/(?!your module folder\/)/]
    }).bundle()
...

Надеюсь, поможет.

Ответ 5

По какой-то причине, babelify 8.0.0 не работал для меня ни с предложениями es2015, ни с env. Тем не менее, по состоянию на esmify 2018-07-10, то esmify плагин от mattdesl сделал работу для меня. Мой тестовый пример заключался в экспорте Spinner из spin.js в качестве глобального окна. Мой пример репо находится здесь; основные данные следуют.

main.js

import {Spinner} from 'spin.js';
window.Spinner = Spinner;

Тестовое задание

В пустом каталоге:

npm init

и принять все значения по умолчанию, затем:

npm install --save spin.js
npm install --save-dev browserify esmify
npx browserify -p esmify main.js -o main-packed.js

Тестовый HTML файл

<html><head>
    <link rel="stylesheet" href="node_modules/spin.js/spin.css" />
    <script src="main-packed.js"></script>    <!-- <== the browserify output -->
</head>
<body>
    <div id="x"></div>
    <script>
    var target = document.getElementById('x');
    var spin = new Spinner().spin(target);
    </script>
</body></html>

При загрузке он отображает счетчик в центре страницы.

Примечание. Я не являюсь аффилированным лицом с mattdesl или esmify.

Ответ 6

В .eslintrc вам может потребоваться указать параметры парсера, например:

{
"rules": {
    "indent": [
        2,
        4
    ],
    "linebreak-style": [
        2,
        "unix"
    ],
    "semi": [
        2,
        "always"
    ]
},
"env": {
    "es6": true,
    "browser": true,
    "node": true,
    "mocha": true
},
"extends": "eslint:recommended",
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}

}

Пожалуйста, ознакомьтесь с руководством по документации от Eslint.

Ответ 7

Эта ошибка может быть вызвана не включением плагина tsify для компиляции typescript в задачу gulp.

Пример

    var tsify = require('tsify');

    return browserify({ ... })
      .plugin(tsify)
      .transform(babelify.configure({
        presets: ["es2015"]
      }))
      ...

См. установку и использование здесь: https://www.npmjs.com/package/tsify

Ответ 8

в моем случае я использовал экспорт вместо экспорта.

изменить экспорт на экспорт.