Компиляция react с синтаксической ошибкой webpack
Я немного новичок в webpack с загрузчиком babel и eslint
и я пытаюсь скомпилировать очень простое приложение
и я получаю эту странную синтаксическую ошибку, которую я не могу понять
Это мой индекс.js, где я получаю ошибку компиляции
const store = configureStore()
render(
<Router>
<Root store={ store } />
</Router>,
document.getElementById('console_root')
)
И это ошибка, которую я получаю:
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
А это мой webpack.конфиг.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"'
}
})
]
}
И вот мои зависимости:
"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"
}
Есть идеи, что я делаю не так?
2 ответов:
Похоже, что вы пропустили добавление пресета
reactв свой веб-пакет .конфиг.JS file или to .babelrc .Сначала вы должны установить его:
npm i babel-preset-react --save-devЗатем добавьтеreactпресет в конфигурацию webpack следующим образомmodule: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['react'] } } } ] }Или создайте новый файл с именем .babelrc и добавьте его туда
// .babelrc { "presets": ["react"] }Это должно работать на вас.
Я думаю, вам нужно создать файл
.babelrcс содержимым в нем{ "presets": [ "es2015", "react" ], }Это скажет babel, чтобы транспилировать es6 в es5, а также сказать, что есть проект react, и он будет обрабатывать соответственно.Для них есть два пакета, которые вам нужны, которые сделают работу
npm install babel-preset-es2015 --save npm install babel-preset-react --save
Comments