react集成ts报错ReferenceError

问题遇到的现象和发生背景

react集成ts报错：
ReferenceError: React is not defined

命令行执行之后
npm run start
一切正常
到浏览器报错：
ReferenceError: React is not defined

webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
    entry: {
        'bundle': './src/index.tsx'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'static/js/[name].js'
    },
    resolve: {
        extensions: ["", ".webpack.js", ".ts", ".tsx", ".js"]
    },
    module: {
        rules: [{
            test: /\.ts(x?)$/,
            exclude: /node_modules/,
            use: {
                loader: 'ts-loader'
            }
        }, {
            enforce: "pre",
            test: /\.(t|j)s$/,
            exclude: /node_modules/,
            loader: "source-map-loader"
        }]
    },
    devServer: {
        historyApiFallback: true,
        hot: true,
        port: 3000,
        static: {
            directory: path.join(__dirname, "build"),
        },
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "public", "index.html"),
        }),
    ],
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
    },
    devtool: 'source-map',
    mode: "development",
}
module.exports = config;

tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

根目录package.json:

{
  "name": "ts-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack serve --mode development",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "cross-env": "^7.0.3",
    "html-webpack-plugin": "^5.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "redux": "^4.2.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "source-map-loader": "^4.0.1",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4"
  }
}

项目结构：

配置下webpack config的ProvidePlugin

new webpack.ProvidePlugin({
    "React": "react",
})

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：ReferenceError: React is not defined 报错解决方法

我通过删除

externals: {
    "react": "React",
    "react-dom": "ReactDOM",
},

解决了问题