Reactjs v17.0.2在Chrome显示空白白屏但Firefox运行正常如何解决

1 优先确认控制台报错信息 #

打开Chrome开发者工具（按F12或Ctrl+Shift+I），切换到Console标签查看具体报错，根据不同报错类型处理：

• 语法类报错（如 Unexpected token 相关）：说明你使用了高版本ECMAScript语法，Babel未完成转译：
  • 安装必要依赖：
    npm install @babel/preset-env @babel/preset-react @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev
  • 项目根目录新增.babelrc配置文件，内容如下：

    {
      "presets": ["@babel/preset-env", "@babel/preset-react"],
      "plugins": ["@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-nullish-coalescing-operator"]
    }
    

• 资源404报错：你当前webpack配置的publicPath为/，如果生产环境没有部署在服务根目录，需要调整为对应部署路径。
• 跨域报错：Chrome的跨域校验规则比Firefox更严格，需要在Spring Boot服务中新增CORS配置，显式允许前端地址的跨域请求。

2 排查浏览器本地问题 #

• 打开Chrome无痕模式（Ctrl+Shift+N）访问应用，排查是否是第三方插件、本地缓存导致的异常
• 访问chrome://flags/，点击页面顶部的「Reset all」按钮重置所有实验特性，部分实验特性会导致React渲染异常

3 调整webpack配置 #

你当前的webpack配置缺少Chrome兼容相关配置，做如下修改：

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

module.exports = {
    mode: "development",
    // 原来的绝对路径改为相对路径，避免路径解析差异
    entry: "./src/index.jsx",
    // 新增target配置，适配浏览器环境+ES5语法
    target: ["web", "es5"],
    output: {
        path: path.resolve(__dirname, "build"),
        publicPath: '/',
        filename: "bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|ico|ttf|eot|woff)$/,
                exclude: /node_modules/,
                use: ["file-loader"]
            },
        ]
    },
    resolve: {
        extensions: [".jsx", ".js"]
    },
    devServer: {
        port: 3000,
        static: {
            directory: path.join(__dirname, 'public'),
        },
        hot: true,
        historyApiFallback: true,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                secure: false
            }
        },

    },
    watchOptions: {
        ignored: /node_modules/
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            title: "Hot Module Replacement",
            // 改为相对路径
            template: "./public/index.html",
            // 新增xhtml配置，避免Chrome对HTML语法严格校验报错
            xhtml: true
        })
    ]
}

4 重新构建验证 #

修改配置后重新执行构建命令，将生成的静态资源部署到Spring Boot对应的静态资源目录，重启服务后在Chrome中重新访问即可。

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