Django-React Integration with webpack

yarn add webpack webpack-cli --dev

now install babel and other required babel dependencies
yarn add @babel/core @babel/preset-react @babel/preset-env --dev

Babel Loaders
yarn add babel-loader css-loader style-loader --dev

install react and react-dom
yarn add react react-dom --dev

Finally we’ll add a few dependencies that are required for using react-router and class based components in react.
yarn add react-router-dom @babel/plugin-proposal-class-properties

webpack.config.js
``` json

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/ui"),
    filename: "[name].js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.(ts|tsx)$/,
        loader: "ts-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ],
};

```

.babelrc

``` json
{
  "presets": [["@babel/preset-react", { "targets": "defaults" }]],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}
```

add these to package.json
```json
  // These are the scripts you should add
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  
 ```
 
 index.js
 ```javascript
 import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
```

I got some MIME error... have any idea how i can go about it?