【发布时间】：2020-08-12 05:41:08
【问题描述】：
在在 Docker 中部署我的应用程序的新版本后，
我看到我的console 出现以下错误破坏了我的应用程序：
Uncaught SyntaxError: Unexpected token '<'
在这个截图中，缺少的源被称为：10.bbfbcd9d.chunk.js，这个文件的内容是这样的：
(this.webpackJsonp=this.webpackJsonp||[]).push([[10],{1062:function(e,t,n){"use strict";var r=n(182);n.d(t,"a",(function(){return r.a}))},1063:function(e,t,n){var ...{source:Z[De],resizeMode:"cover",style:[Y.fixed,{zIndex:-1}]})))}))}}]);
//# sourceMappingURL=10.859374a0.chunk.js.map
发生此错误的原因是：
- 在每个版本中，我们都会构建一个新的
Docker图像，仅包含最新版本的块 - 一些客户端正在运行过时版本，而服务器不会解决旧块，因为（ 1)
块是由
webpack生成的.js文件，请参阅more information 的代码拆分
重新加载应用程序会将版本更新到最新版本，但对于所有使用过时版本的用户来说，它仍然会破坏应用程序。
我尝试过的一个可能的解决方法是刷新应用程序。如果服务器上缺少请求的块，如果对 .js 文件的请求最终在通配符路由中，我将发送重新加载信号。
通配符服务于 Web 应用程序的
index.html，用于在用户刷新页面时将路由委托给客户端路由
// Handles any requests that don't match the ones above
app.get('*', (req, res) => {
// prevent old version to download a missing old chunk and force application reload
if (req.url.slice(-3) === '.js') {
return res.send(`window.location.reload(true)`);
}
return res.sendFile(join(__dirname, '../web-build/index.html'));
});
这似乎是一个糟糕的修复，尤其是在 Android 版 Google Chrome 上，我看到我的应用程序在无限循环中刷新。 （是的，这也是一个丑陋的解决方案！）
由于它对我的最终用户来说不是一个可靠的解决方案，因此我正在寻找另一种方法来在用户客户端过时时重新加载应用程序。
我的 Web 应用程序是使用 webpack 构建的，就像它是一个 create-react-app 应用程序一样，分布式构建目录包含许多 .js 块文件。
这些是一些可能的修复I got offered on webpack issue tracker，一些是由 webpack 创建者自己提供的：
- 不要删除旧版本。
-
捕获
import()错误并重新加载。您也可以通过在某处修补__webpack_load_chunk__来全局执行此操作。 import()，我不是自己制作这些块，它只是一个生产功能 -
让服务器为不存在的 js 文件发送
window.location.reload(true)，但这是一个非常奇怪的 hack。 -
不要为
.js请求发送 HTML，即使它们不存在，这只会导致奇怪的错误
相关问题
如何实施可以防止此错误的解决方案？
【问题讨论】：
-
这似乎是客户端错误。能否提供相关的客户端代码？
-
嗯，在我看来，这信息太少了。刷新站点后语法错误消失？当您在第一次加载网站之前清除浏览器缓存时，是否也会发生这种情况？
-
我已经更新了问题、标题并添加了尽可能多的信息。我没有添加复制品，我看不出它会有什么帮助，而且这是不可能的。 问题标题也可能是：如何处理 docker 中为过时客户端提供的 webpack 应用程序
标签： javascript docker webpack create-react-app webpack-splitchunks