Estoy tratando de hacer que el paquete web funcione con Babel y React para transpilar mis archivos .jsx a .js para usarlos en el navegador web, pero estoy fallando.

Mi webpack.config.js:

 module.exports = { mode: 'production', entry: './src/pages/', output: { path: '/pathToMyProj/__assets', filename: '[name].js', uniqueName: 'myProject' }, module: { rules: [ { test: /(\.jsx|\.js)$/, include: `${process.cwd()}/src/**/*.jsx`, use: { loader: 'babel-loader', options: { presets: ["@babel/preset-react", "@babel/preset-env"] } } } ] }, resolve: { modules: ['node_modules/**/*'], extensions: ['.jsx', '.js'], }, experiments: { topLevelAwait: true } }

mi .babelsrc:

 { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": [], "comments": false, "compact": true }

mi paquete.json:

 { "dependencies": { "@babel/preset-env": "^7.18.2", "@babel/preset-react": "^7.17.12", "axios": "^0.27.2", "babel-loader": "^8.2.5", "babel-preset-es2015": "^6.24.1", "path": "^0.12.7", "react": "^18.1.0", "react-dom": "^18.1.0", "webpack": "^5.72.1" }, "devDependencies": { "webpack-cli": "^4.9.2" } }

con esta configuración (webpack@5.72.1, webpack-cli@4.9.2), pero de alguna manera webpack no puede reconocer la sintaxis jsx y arroja un error:

 ERROR in ./src/pages/index.jsx 21:4 Module parse failed: Unexpected token (21:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | toRender = > <p><br />Welcome<br /><a href="/manage">Test</a><br /><br />Not you? <a href="/logoff">Log off</a></p> | } | } else { webpack 5.72.1 compiled with 1 error in 231 ms

¿Cómo puedo arreglar esto?