webpack и реагировать - ReactDom не определен

Я пытаюсь создать простой веб-пакет и реагировать на веб-страницу, а также использовать файлы jsx.

я бегу

webpack serve --mode development --env development

и все это компилируется нормально, но загружая страницу я получаю

Uncaught ReferenceError: React is not defined

Я пытаюсь использовать Emotion js и заставить работать простую веб-страницу переключения темы для проверки концепции.

Это моя структура каталогов:

|-- node_modules/
|-- src/
|   |-- desktop/
|   |   |-- index.html
|   |   `-- index.jsx
|   `-- themes/
|       |-- themes.js
|       |-- default.js
|       `-- other.js
|-- www/
|-- .babelrc
|-- package.json
|-- webpack.config.js

У меня были некоторые проблемы с папкой node_modules, которая не находилась в той же папке, что и src/, и вместо этого была родственной. URL-адрес также должен быть /desktop/index.html, а не просто index.html.

Это мой файл index.jsx:

'use strict';

import React from 'react';
import ReactDom from 'react-dom';

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return (
      <button onClick={() => this.setState({ liked: true }) }>
        Like
      </button>
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@emotion"]
}

webpack.config.js

const webpack = require('webpack');
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

const BUILD_DIR = path.resolve(__dirname,'www');
const SRC_DIR = path.resolve(__dirname,'src');
const NODE_DIR = path.resolve(__dirname,'node_modules');

module.exports = {
  entry: {
    main: path.join(SRC_DIR,"desktop/index.jsx")
  },
  output: {
    filename: "nd-js/bundle.js",
    path: BUILD_DIR,
    publicPath: "/"
  },
  context: SRC_DIR,
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.join(SRC_DIR,'desktop/index.html'),
      filename: "desktop/index.html"
    })
  ],
  devServer: {
    contentBase: SRC_DIR,
    open: true,
    openPage: 'desktop/index.html',
    index: 'desktop/index.html',
    compress: false,
    port: 8080
  },
}

Мои зависимости Package.json:

  "dependencies": {
    "@emotion/react": "^11.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@babel/preset-stage-0": "7.8.3",
    "@emotion/babel-plugin": "^11.0.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.2.1",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }

Просматривая созданный файл bundle.js при использовании --mode development, я думаю, что проблема заключается в том, что он неправильно указывает путь к папке node_modules, как я вижу это в скомпилированном коде:

__webpack_require__(/*! react-dom */ \"../node_modules/react-dom/index.js\");

Хотя, это только мое лучшее предположение.