![](/img/trans.png)
[英]Cannot use import statement outside a module with Babel configured
[英]Cannot use import statement outside a module babel
很抱歉問了同樣的問題,但在瀏覽了許多博客/SO 答案后我無法解決這個問題..
Package.json 如下: 這里我已經添加了類型模塊但沒有運氣,還添加了 --experimental-modules 標志
"name": "my-react-app",
"version": "1.1.1",
"private": true,
"type": "module",
"scripts": {
.......
"start": "webpack-dev-server --env.dev",
"start:server": "node --experimental-modules src/server/bootstrap.js",
.....
},
"dependencies": {
"@babel/runtime": "^7.10.2",
"babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"custom-event-polyfill": "^1.0.6",
"fbemitter": "^2.1.1",
"install": "^0.12.1",
"precise-ui": "^1.3.0",
"react": "^16.13.1",
"react-dom": "^16.4.2",
"react-fast-compare": "^2.0.2",
"react-open-weather": "^0.3.0",
"react-router-dom": "^4.3.1",
"styled-components": "^5.1.1"
}
....
}
src/server/bootstarp.js 我已經添加了預設
require('ignore-styles');
require('babel-register')({
ignore: [ /(node_modules)/ ],
presets: ["env", "react", "stage-2","es2015","es2016"],
plugins: []
});
require('./index');
bable.config.js 如下:
{
"presets": ["env", "react", "stage-2","es2015","es2016"],
"plugins": [],
"env": {
"test": {
"plugins": [
[
"istanbul",
{
"include": [
"src/**.*"
],
"exclude": [
"dist/**.*",
"node_modules/**.*",
"tests/**.*"
]
}
]
]
}
}
}
執行 npm 運行啟動時出現錯誤:服務器:
node --experimental-modules src/server/bootstrap.js
/Users/zospakir/Projects/my-react-app/node_modules/precise-ui/dist/es6/index.js:1
import * as colors from './colors';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1116:16)
at Module._compile (internal/modules/cjs/loader.js:1164:27)
at Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
at Object.require.extensions.<computed> [as .js] (/Users/zospakir/Projects/my- react- app/node_modules/babel-register/lib/node.js:152:7)
節點版本:v14.4.0 NPM 版本:6.14.5
我也嘗試將 bootstrap.js 更改為 bootstrap.cjs 但它也沒有幫助
嘗試這個:
npm install babel-plugin-syntax-dynamic-import --save
bable.config.js 設置導入插件:
"plugins": [
"syntax-dynamic-import"
]
參考 鏈接
謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.