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

【问题标题】：Uncaught SyntaxError: Unexpected token '<' and ChunkLoadError: Loading chunk 16 failedUncaught SyntaxError: Unexpected token '<' and ChunkLoadError: Loading chunk 16 failed
【发布时间】：2021-09-27 02:26:00
【问题描述】：

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

Uncaught SyntaxError: Unexpected token '

直接在这下面是这个错误

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

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

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

【问题讨论】：

你有持续部署设置吗？
是的。我使用metlife，所以会自动设置持续部署@PrakashS
因此，当部署新的 build. 时，可能会发生错误。也许您可以使用错误边界捕获块加载错误并重新加载页面。
制作。感觉。谢谢
您是否尝试将其部署到其他服务，例如 heroku 或 firebase ？查看是否出现问题保持。您是否尝试在构建后在本地打开 index.html ？您的应用是否以这种方式正常运行？

标签： javascript reactjs create-react-app

【解决方案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>

【讨论】：

非常感谢您的建议，但如果用户正在处理重要的事情，比如交易，该怎么办。
这是一个不同的问题，与部署过程有关，而不是反应。 webpack 编译您的生产构建的方式，预计 js/css 块将在您的网络服务器上可用。部署时，您要么需要为任何“实时”用户保留旧版本的块与新版本一起使用，要么在部署之前耗尽您的节点。