当我尝试将我的模块与 webpack 捆绑在一起时,它无法识别JSX
我的index.js
文件中的语法并给出以下错误:
ERROR in ./src/index.js 29:3
Module parse failed: Unexpected token (29:3)
You may need an appropriate loader to handle this file type.
| const searchTerm = _.debounce(term => {this.searchTerm(term)}, 300);
| return (
> <div>
| <SearchBar onInputChange= {searchTerm}/>
| <div className="row">
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js main[1]
这是我的 webpack 配置:
const Path = require('path');
module.exports = {
entry: ['./src/index.js'],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: Path.resolve(__dirname, '../src'),
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-react", "@babel/preset-env"]
}
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [ 'css-loader' ]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './',
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
}
};
我已经添加了反应的 babel 预设,即@babel/preset-react。我还添加了 babel-loader 但它仍然无法识别 JSX 语法。
我克隆了你的 repo,发现你的代码设置存在一堆冲突。
@babel/core
。如果你打算使用最新版本的 babel,不妨使用最新的预设。`
devDependencies: {
@babel/cli: ^7.0.0,
@babel/core: ^7.0.0,
@babel/preset-env: ^7.0.0,
@babel/preset-react: ^7.0.0,
babel-loader: ^8.0.0"
}
`
和我删除babel-preset-env
,并babel-preset-react
在你的(旧版本)dependencies
。
选择一种babel
配置。它在您的package.json
或在.babelrc
. 我建议你坚持使用.babelrc
文件。并更改了presets
属性的值。
`"presets": ["@babel/preset-react", "@babel/preset-env"],`
在你的webpack.config.js
你不需要做include: include: Path.resolve(__dirname, './src')
。您还可以删除此行:
`presets: ["react", "env"]`
顺便说一句,在你的package.json
,
"scripts": { - "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", + "start": "webpack-dev-server --mode development", ...
当您运行npm start
您的项目时,将查看本地安装的webpack-dev-server
并在未找到本地包时使用全局包。
希望这可以帮助。:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句