When i try to bundle my modules with webpack, it cannot identify the JSX
syntax inside my index.js
file and gives the following error:
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]
This is my webpack config:
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
}
}
};
I have added the babel presets for react namely @babel/preset-react. I have also added the babel-loader but still it cannot identify the JSX syntax.
"presets": ["react", "env"],
– Roman Maksimovpackage.json
please – Roman Maksimovbabel-preset-react-app
preset (nom i babel-preset-react-app
oryarn add babel-preset-react-app
) and use"presets": ["react-app"]
. Also it's better to dedicate thebabel
options into a.babelrc
file in the root of the app – Roman Maksimov