web-dev-qa-db-ja.com

SyntaxError：「import」と「export」は「sourceType：module」でのみ表示される場合があります。

したがって、次の2つのファイルを検討してください。

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'

申し訳ありませんが、このエラーは何ですか？何が間違っていますか？

javascriptgulpecmascript-6browserifybabel
21
TheWebs

Babelの古いバージョンには、すべてがすぐに使用できます。新しいバージョンでは、セットアップに必要なプラグインをインストールする必要があります。最初に、ES2015プリセットをインストールする必要があります。

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

次に、インストールしたプリセットを使用するようにbabelifyに指示する必要があります。

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

ソース

16
Mike Cluck

これは仕様に違反しているため、ESLintはネイティブでこれをサポートしていません。ただし、babel-eslintパーサーを使用する場合は、eslint構成ファイル内で次の操作を実行できます。

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

ドキュメント参照： https://github.com/babel/babel-eslint#configuration

ここから参照される回答： eslintエラーを無視： 'import'および 'export'はトップレベルにのみ表示される場合があります

11
kaushalop

Es2015-reactコードを正しくコンパイルするには、いくつかのノードモジュールをインストールする必要があります。

世界的に

npm install -g browserify

アプリのディレクトリで：

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

次に、gulpタスクを作成します。

    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ファイルがあります。

3
Red Efire

ES6スタイルでエクスポートするnode_modulesからモジュールをインポートしようとすると、同じエラーが発生しました。 SOで提案されていることは何も解決しませんでした。次に、 babelify repo のFAQセクションを見つけました。そこからの洞察によれば、node_modulesからのモジュールはデフォルトでトランスコンパイルされず、それらのexport default ModuleNameのようなES6宣言はCommon.jsスタイルのモジュールを搭載したノードによって理解されないため、エラーが表示されます.

そこで、パッケージを更新し、globalオプションを使用して、すべてのノードモジュールを除くグローバル変換としてbabelifyを実行しましたが、babelifyリポジトリページに示されているように、

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

それが役に立てば幸い。

2
curveball

何らかの理由で、es2015またはenvのどちらでもbabelify 8.0.0が機能しませんでした。ただし、 2018-07-10現在 、 esmify プラグイン mattdesl でうまくいきました。私のテストケースはSpinnerを spin.js ウィンドウグローバルとして。リポジトリの例は here ;です。主な詳細は次のとおりです。

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と提携していません。

1
cxw

。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 のドキュメントガイドを確認してください。

1
Stefan Ciprian Hotoleanu

このエラーは、gulpタスクにTypeScriptをコンパイルするtsifyプラグインを含めないことが原因で発生する可能性があります。

例

    var tsify = require('tsify');

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

インストールと使用方法はこちらをご覧ください： https://www.npmjs.com/package/tsify

0
Stuart Bentley

私の場合、exportsの代わりにexportを使用しました。

exportをexportsに変更します。

0
saigopi