Javascript 从“react”导入 React 导致 Uncaught SyntaxError: Unexpected identifier
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48414349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Import React from 'react' results in Uncaught SyntaxError: Unexpected identifier
提问by adang3
I've installed webpack 3 along with babel and my entry index.js/bundle.jswill build and run, which I've tested with ES7/8 features, however imports won't work and result in Uncaught SyntaxError: Unexpected identifier. I've tried putting the babel config in the package.jsonas well as in a separate .babelrcfile in my app root directory but I still get the error when trying to import. Am I missing a package or setting?
我已经安装了 webpack 3 和 babel 并且我的条目index.js/bundle.js将构建和运行，我已经使用 ES7/8 功能对其进行了测试，但是导入将不起作用并导致Uncaught SyntaxError: Unexpected identifier. 我已经尝试将 babel 配置放在我的应用程序根目录package.json中的一个单独的.babelrc文件中，但在尝试导入时仍然出现错误。我是否缺少包装或设置？
index.js(works)
index.js（工作）
// does not work
// import React from 'react'
// works
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.values(object1));
webpack.config.js
webpack.config.js
const path = require('path')
module.exports = {
context: path.resolve(__dirname, 'app/assets/javascripts/source'),
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app/assets/javascripts/webpack')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
.babelrc
.babelrc
{
"presets": ["env", "react"]
}
package.json
包.json
}
...
"license": "MIT",
"scripts": {
"build": "webpack",
},
"babel": {
"presets": [
"env",
"react"
]
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
}
}
采纳答案by Jayavel
Try this : transform-es2015-modules-amd , This plugin transforms ES2015 modules to Asynchronous Module Definition (AMD).
试试这个： transform-es2015-modules-amd ，这个插件将 ES2015 模块转换为异步模块定义（AMD）。
{
presets: ["env", "react"],
plugins: ["transform-es2015-modules-amd"]
}
more at transform-es2015-modules-amd
回答by RANVIR GORAI
It is not working because it is not translating es6, so import statement is not working, Yo need to babel-preset-es2015
它不起作用，因为它没有翻译es6，所以import语句不起作用，你需要babel-preset-es2015
and configure it .babelrc
并配置它.babelrc
{
"presets":[
"es2015", "react"
]
}
