Когда я пытаюсь связать мои модули с веб-пакетом, он не может определить синтаксис 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]
Это мой конфиг веб-пакета:
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-реагировать. Я также добавил загрузчик babel, но он по-прежнему не может определить синтаксис JSX.