在为我的项目设置webpack时，我不断收到以下错误 . 我已经在webpack之前构建了我的项目，我现在正在设置它，所以我可以对我的项目进行修改 . 所以请原谅我对此的无知 .
ERROR in ./client/src/index.js
Module parse failed: Unexpected token (42:2)
You may need an appropriate loader to handle this file type.
ReactDOM.render(
<Provider store={store}>
<Router history={hist}>
<div>
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./client/src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "bundle.js"
},
resolve: {
extensions: [".js", ".jsx"]
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
test: /\.(sa|sc|c)ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
use: {
loader: "babel-loader"
}
}
],
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
options: { presets: ["es2015", "react"] },
include: [path.resolve(__dirname, "client")]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/public/index.html"
})
]
};
Edit 在我的index.js中，我尝试了建议的答案
ReactDOM.render(
React.createElement(
<Provider store={store}>
.babelrc
{
"presets": ["es2015", "env", "react"],
"plugins": [
"transform-class-properties",
"transform-react-jsx",
"transform-object-rest-spread",
[
"module-resolver",
{
"root": ["./src"]
}
],
["import-rename", { "^(.*)\\.jsx$": "$1" }]
]
}
1 回答
在jsx / tsx文件中，反应元素由jsx编译器转换为
ReactDom.render（React.createElement（
但由于您的索引文件是.js文件，您需要手动执行此操作 .
有关更多说明，请点击此链接https://reactjs.org/docs/react-without-jsx.html