Webpack Does Not Recognise Babel Loader Even when babel loader is installed - reactjs

Question

I have webpack and babel loader installed, however, webpack is unable to recognise that Babel Loader is installed:
I installed babel loader and the presets using the following command: npm install #babel/core babel-loader #babel/preset-react --save-dev
Here is my
webpack.config.js:
const path = require('path')
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react'],
},
},
],
},
}
module.exports = config
and package.json:
{
"name": "webpack",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack --mode=development",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"install": "^0.13.0",
"npm": "^8.13.2",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}

Answer 1

Your Webpacks Babel module rule object has a wrong structure. Please, follow the Webpack official docs and wrap your 'loader' and 'options' properties in a 'use'.
Wrong rules:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react'],
},
},
],
},
Correct rules:
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react']
}
}
}
]
}