web-dev-qa-db-ja.com

「SyntaxError：モジュール外でimportステートメントを使用できない」とBabel、Jest、webpack

Babel 7、Webpack 4、Jestの構成に問題があります。テストを実行しているときに、次のエラーが発生します。

SyntaxError：モジュールの外部ではimportステートメントを使用できません

package.json

 "@babel/core": "^7.7.5",
    "@babel/highlight": "^7.8.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^7.1.5",
    "@babel/plugin-transform-runtime": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "@babel/runtime": "^7.8.4",
    "babel-jest": "^24.9.0",
    "jest-watch-typeahead": "^0.4.2",
    "vue-jest": "^3.0.5",
    "jest": "^24.9.0",
    "jest-serializer-vue": "^2.0.2",
    "jest-transform-stub": "^2.0.0",

webpack.config.js

  entry: {
      app: ["./src/index.js"]
  },
  output: {
    path: path.resolve('../', 'static/js/'), 
    filename: "[name].js",
    publicPath: '/static/js/', 
    chunkFilename: '[name].chunk.js' 
  },

。babelrc-問題はmodule：falseにあると想定しましたが、これを含めないと、webpackがファイルをチャンクしません。


{
  "presets": [
    ["@babel/preset-env", {"modules": false}, "jest" ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import" 
  ],
    "env": {  
      "test": {
        "plugins": ["@babel/plugin-transform-runtime"],
      }
    }
}

私がmodule：falseテストを実行していたとき、テストにmodule：falseを含めない可能性はありますか？

webpackjestjsbabel
4
kasia

[email protected]、ネイティブでサポートしているため、テストでesmをサポートするためにコードをトランスパイルする必要はありません。 here を見つけることができます。これはまだ文書化されていないため、それを達成する方法です。

0
Radovan Kuka

importステートメントはESモジュールでのみ許可されます。テストは、common =モジュールを使用するNodeで実行されています。

"type": "module"をpackage.jsonファイルに追加してみてください

Node実行中のバージョンも確認してください。これについて詳しくは、ノードのドキュメント https://nodejs.org/api/esm.html#esm_ecmascript_modules を参照してください。 =

0
deowk