[英]Compiling react with webpack syntax error
I'm a little bit new to webpack with babel loader and eslint and I'm trying to compile a very basic application and I get this weird syntax error that I can't figure out 我对使用babel loader和eslint的webpack有点新意,我正在尝试编译一个非常基本的应用程序,我得到这个奇怪的语法错误,我无法弄清楚
This is my index.js, where I get the compiling error 这是我的index.js,我得到了编译错误
const store = configureStore()
render(
<Router>
<Root store={ store } />
</Router>,
document.getElementById('console_root')
)
and this is the error I get: 这是我得到的错误:
ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (19:2)
17 |
18 | render(
> 19 | <Router>
| ^
20 | <Root store={ store } />
21 | </Router>,
22 | document.getElementById('console_root')
npm ERR! code ELIFECYCLE
npm ERR! errno 2
and this is my webpack.config.js file 这是我的webpack.config.js文件
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
main: path.resolve(__dirname, 'src', 'index.js')
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: path.resolve(__dirname, '..'),
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
]
}
and these are my dependencies: 这些是我的依赖:
"dependencies": {
"material-ui": "^1.0.0-beta.26",
"material-ui-icons": "^1.0.0-beta.17",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.1.2",
"babel-loader": "^7.1.2",
"css-loader": "^0.28.7",
"eslint": "^4.14.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.5.1",
"react-scripts": "^1.0.17",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
any ideas what am I doing wrong? 任何想法我做错了什么?
Seems like you missed to add react
preset to your webpack.config.js file or to .babelrc . 好像您错过了将react
预设添加到webpack.config.js文件或.babelrc 。
First you should install it: npm i babel-preset-react --save-dev
Then add react
preset to your webpack config like the following 首先你应该安装它: npm i babel-preset-react --save-dev
然后将react
预设添加到你的webpack配置中,如下所示
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['react']
}
}
}
]
}
Or create a new file called .babelrc and add it there 或者创建一个名为.babelrc的新文件并将其添加到那里
// .babelrc
{
"presets": ["react"]
}
It should work for you. 它应该适合你。
I guess you need to create a .babelrc
file with content in it 我想你需要创建一个包含内容的.babelrc
文件
{
"presets": [
"es2015",
"react"
],
}
This will tell babel to transpile es6 to es5 and also tell there is a react project and it will handle accordingly.For these there are two packages you need which will do the job 这将告诉babel将es6转换为es5,并告诉他们有一个反应项目,它将相应地处理。对于这些,你需要两个包来完成这项工作
npm install babel-preset-es2015 --save
npm install babel-preset-react --save
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.