Reactjs v17.0.2 在 chrome 浏览器上显示空白屏幕，但在 firefox 浏览器上完全正常答案

【问题标题】：Reactjs v17.0.2 showing blank white screen on chrome browser but its completely fine on firefox browserReactjs v17.0.2 在 chrome 浏览器上显示空白屏幕，但在 firefox 浏览器上完全正常
【发布时间】：2021-09-26 07:35:16
【问题描述】：

我使用 Webpack 作为我的 Reactjs 应用程序的模块捆绑器。使用 spring boot 作为后端服务。在开发服务器和生产服务器上的 Firefox 浏览器上都可以。您可以从此处检查生产版本： https://fullstackapp.io

但它不适用于 chrome 浏览器，它在生产和开发环境中都显示完全像这样的空白页面。我该如何克服这种情况？

我的 wepback.config.js 是：

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

module.exports = {
    mode: "development",
    entry: "/src/index.jsx",
    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"
        })
    ]
}

显示错误：

【问题讨论】：

有指示符“1error”但错误本身似乎被过滤掉了
这只是一个 RestAPI 响应。它只是检查用户是否经过身份验证。
刚刚在 chrome 中打开了您的链接。渲染得很好。没有错误。
请添加一些可重现的代码，人们很难使用缩小的代码。
有时它可以在 Chrome 中工作，但当您在浏览器上硬重新加载时并不总是这样。请用手机确认。

标签： reactjs webpack react-router-dom

【解决方案1】：

终于解决了我的问题。问题实际上是因为我在 App.js 文件中编写的这段代码而发生的。我删除了它，它可以工作。

useEffect(() => {
    window.onload = () => {
        setTimeout(() => {
            setPageLoad(false);
        }, 30);
    }
    window.addEventListener("popstate", () => {
        setPageLoad(true);
        window.location.reload();
    })
},[])

我使用它是因为，当用户使用浏览器硬重新加载或使用浏览器按钮向后或向前导航时，我需要一些时间来设置我的路线。我将其删除并以另一种方式解决。现在它工作得很好。

【讨论】：