Adding a React Application to a div using webpack

As i read, the best option to add a react app build to a existing website div is generate a bundle with webpack, but i have this error:

package.json

...
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^9.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1"
  }

webpack.config.js

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-react",
              {
                runtime: "automatic",
              },
              "env",
              "react",
              "es2015",
              "stage-2",
            ],
          ],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
};

webpack give me this error:

asset main.js 1.6 KiB [emitted] (name: main)
./src/index.js 470 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js 16:2
Module parse failed: Unexpected token (16:2)
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
| const root = ReactDOM.createRoot(document.getElementById("root"));
| root.render(
>   <Provider store={store}>
|     <App />
|   </Provider>

webpack 5.83.1 compiled with 1 error in 108 ms

How can i solve it? I want to include my build in a existing html.

The reason I believe you are getting the error is that it is trying to transpile your JSX using a JavaScript preset. Presets run from bottom to top, so the last one runs first. As JavaScipt transpilers don't understand JSX, you need to run the React transpiler first.

I created a basic app with webpack transpiling React. I tested it and it works. You may need specific rules based on the babel-env preset.

// webpack.config.js
const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-env",
            "@babel/preset-react",
          ],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
};

// package.json
{
  "name": "simple-webpack",
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1"
  }
}