<分区>
我正在尝试使用 webpack 和 babel 构建我的 React 项目，但我不明白为什么它会生成以下错误。我已经按如下方式设置了 .babelrc 和 webpack.config.js 文件，但仍然不明白哪里出了问题以及为什么它不能识别 jsx。
请让我知道您的宝贵意见。
谢谢
[./src/index.js] 802 bytes {main} [built] [failed] [1 error]
+ 11 hidden modules
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (25:1)
23 |
24 | ReactDOM.render(
> 25 | <Provider store={store} >
| ^
26 | <App />
27 | </Provider>
28 | ,
@ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js
ℹ ｢wdm｣: Failed to compile.
.babelrc
{
"presets": ["env", "stage-0"]
}
webpack.config.js
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: __dirname + "public/assets",
filename: "bundle.js",
publicPath: "assets"
},
devServer: {
inline: true,
contentBase: "./public",
port: 4000
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['env','stage-0',]
},
},
{
test: /\.json$/,
exclude: /(node_modules)/,
loader: 'json-loader'
}
]
}
}
目录结构
├── graph_generator
│ ├── arrows_candlesticks_graph_set2_v1.py
│ ├── data.json
│ ├── graph_generator.py
│ ├── json_reader.py
│ └── test.py
├── package.json
├── public
│ ├── assets
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── README.md
├── src
│ ├── actions.js
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── components
│ │ ├── containers
│ │ │ ├── Graph.js
│ │ │ ├── MyPlot.js
│ │ │ └── Params.js
│ │ └── ui
│ │ ├── App.css
│ │ ├── Graph.js
│ │ ├── MyPlot.js
│ │ └── Params.js
│ ├── config.js
│ ├── constants.js
│ ├── data.json
│ ├── index.css
│ ├── index.js
│ ├── index.js.back
│ ├── initialState.js
│ ├── logo.svg
│ ├── registerServiceWorker.js
│ ├── store
│ │ ├── index.js
│ │ └── reducers.js
│ └── stylesheets
│ └── Params.js
├── webpack.config.js
├── yarn-error.log
└── yarn.lock
解决方案
编辑
安装后问题解决
yarn add babel-preset-react --dev
然后更改我的预设，如下所示:
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['env','stage-0',]
},
},