Question

所以我有一个 React 应用程序（使用 create-react-app 设置），但是每当我推送到 netlify 并且有一个新版本时，我都会收到这些错误

<块引用>

未捕获的语法错误：意外标记“<”16.0fcd6807.chunk.js:1

直接在这个下面是这个错误

<块引用>

块加载错误：加载块 16 失败。 react_devtools_backend.js:2560 ChunkLoadError: 加载块 16 （缺失：http://localhost:3000/static/js/16.0fcd6807.chunk.js）

我已经尝试了所有可能的在线解决方案，例如将主页设置为“主页”：“。”在 package.json 中，在 index.html 中设置 base with ，以及 SO 和在线整体上的其他解决方案。我目前使用的是 react 版本 17.0.2 和 react-scripts 4.0.3。

我尝试过的所有方法似乎仍然无法解决此问题。可能是什么问题，我该如何解决这个问题。谢谢

Answer 1

Look at this question here.

实际上，您的用户会尝试加载不再可用的缩小的 js 块（因为您发布了新版本）。

您可以定义一个简单的错误边界处理程序，如 Prakash 建议的，也在 official React documentation.

中描述

在 getDerivedStateFromError 方法中返回新状态的地方，可以附加一个标志来检测错误是否确实是块加载失败：

   static getDerivedStateFromError(error) {

        return {
            hasError: true,
            chunkError: /Loading( CSS)? chunk [\d]+ failed/.test('Loading chunk 8 failed'),
        };
    }

然后，一旦您的状态保持标记，您就可以以编程方式重新加载页面，而不是在您的 render 方法中显示错误页面：

render() {
        if (this.state.chunkError) {
            window.location.reload();
        } else if (this.state.hasError) {
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
}

最后，你用这个 ErrorBoundary 组件包装你的整个应用程序（在 index.js 中）：

<ErrorBoundary>
    <App />
</ErrorBoundary>

Uncaught SyntaxError: Unexpected token '<' and ChunkLoadError: Loading chunk 16 failed

1 个答案: