Webpack cannot identify my JSX syntax inside my js file - reactjs

Question

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.

Answer 1

I cloned your repo and found a bunch of conflicts on your code setup.
Some of your packages are not aligned with the latest versions of your #babel/core package. If you are going to use the latest version of babel, might as well use the latest presets.
`
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"
}
`
and I removed babel-preset-env and babel-preset-react (the old versions) on your dependencies.
Pick one babel configuration. It's either on your package.json or on .babelrc. I suggest you stick with the .babelrc file. And changed the values of the presets property.
`"presets": ["#babel/preset-react", "#babel/preset-env"],`
On your webpack.config.js you don't need to do include: include: Path.resolve(__dirname, './src'). You can also remove this line:
`presets: ["react", "env"]`
and BTW, on your package.json,
"scripts": {
- "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+ "start": "webpack-dev-server --mode development",
...
when you run npm start your project will look into a locally installed webpack-dev-server and use the global one if it does not find the local package.
Hope this helps. :)