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

Question

赏金明天到期。 此问题的答案有资格获得+150声望奖励。 WhiteHox正在寻找规范的答案。

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

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

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

块加载错误：加载块 16 失败。 react_devtools_backend.js:2560 ChunkLoadError: Loading chunk 16 (missing: 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

看看这里的这个问题。

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

您可以定义一个简单的 Error Boundary 处理程序，就像 Prakash 建议的那样，也在官方 React 文档中进行了描述。

在getDerivedStateFromError方法中返回新状态的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>