Laravel Mix集成React+TS报错：React.StrictMode无法作为JSX组件

问题背景 #

• 项目最初基于create-react-app搭建，计划迁移至Laravel Mix完成构建流程
• 已尝试以下排查方案，问题均未解决：
  • 回退React版本至17
  • 删除node_modules目录与package-lock.json文件后重新安装依赖
  • 切换yarn作为包管理器安装依赖
  • 清除依赖缓存后重新安装
  • 切换多个不同Node.js版本运行

报错信息 #

'React.StrictMode' cannot be used as a JSX component.
  Its return type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not a valid JSX element.
    Type 'ReactElement<any, string | JSXElementConstructor<any>>' is missing the following properties from type 'Element': isRootInsert, isCommentts

相关代码与配置 #

项目入口代码 #

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QuizContextProvider } from "./context/quiz.context";
import { ResponseContextProvider } from "./context/response.context";
import { UTMVarsContextProvider } from "./context/utm.context";

window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

if (process.env.NODE_ENV === "production") console.log = (..._: any[]) => {};

ReactDOM.render(
    <React.StrictMode>
        <UTMVarsContextProvider>
            <QuizContextProvider>
                <ResponseContextProvider>
                    <App />
                </ResponseContextProvider>
            </QuizContextProvider>
        </UTMVarsContextProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

package.json配置 #

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@types/jquery": "^3.5.14",
        "@types/node": "^18.0.4",
        "axios": "^0.27.2",
        "bootstrap": "^4.0.0",
        "browser-sync": "^2.27.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.21",
        "miragejs": "^0.1.45",
        "popper.js": "^1.12",
        "resolve-url-loader": "^5.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@types/react": "18",
        "@types/react-dom": "18",
        "filepond": "^4.30.3",
        "formik": "^2.2.9",
        "media-recorder-js": "^2.1.0",
        "nanoid": "^4.0.0",
        "prettier": "^2.7.1",
        "react": "18",
        "react-dom": "18",
        "react-router-dom": "^6.3.0",
        "recordrtc": "^5.6.2",
        "sass": "^1.53.0",
        "sass-loader": "^13.0.2",
        "smooth-scrollbar-react": "^2.3.0",
        "sweetalert2": "^11.4.4",
        "ts-loader": "^9.3.1",
        "typescript": "^4.7.4",
        "yup": "^0.32.11"
    },
    "volta": {
        "node": "16.16.0",
        "npm": "8.11.0"
    }
}

报错截图 #

Laravel Mix配置文件 #

mix.js("resources/js/app.js", "public/js")
    .sass("resources/css/app.scss", "public/css")
    .sass("resources/css/styles.scss", "public/css")
    .ts("resources/js/react-frontend/index.tsx", "public/assets/js")
    .react()
    .browserSync("127.0.0.1:8000")
    .version();

内容的提问来源于stack exchange，提问作者plutolaser