【已解决】Vite 部署后报错:Failed to fetch dynamically imported module

问题描述:

使用Vite打包构建的项目,重新部署到生产。在部署期间用户一直停留在当前项目页面,部署完成后点击页面上的路由,报错! 刷新后恢复正常。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

TypeError: Failed to fetch dynamically imported module: xxx/assets/index-4f5b61b3.js

在Vite的github找到下面这个issue,一模一样的问题

github.com/vitejs/vite...

Since switching to Vite we noticed a new production issue, where sometimes users are encountering an error if we deploy while they have an active session:

这个issue留言还比较多,同时也找到了解决方法:

js 复制代码
// Hard-reload the page when chunk load errors match the navigation error
const routerInstance = router();
routerInstance.onError((error, to) => {
  const errors = ['Failed to fetch dynamically imported module', 'Unable to preload CSS'];

  if (errors.some((e) => error.message.includes(e))) {
    window.location = to.fullPath;
  }
});
相关推荐
硅基宙宇AIGC10 小时前
阿里Qoder重磅登场:AI编程平台新王者,程序员的饭碗要换了吗?
前端
影i10 小时前
跨域登录 / Token 共享 踩坑记录
前端
小爱同学_10 小时前
从前端模块化历史到大厂面试题
前端·javascript·面试
雪中何以赠君别10 小时前
AMD、CMD 和 ES6 Module 的区别与演进
前端·javascript
鱼钓猫10 小时前
H5 电子签名组件
vue.js·canvas
专注VB编程开发20年11 小时前
rust语言-对象多级访问
服务器·前端·rust
徐_三岁11 小时前
关于npm的钩子函数
前端·npm·node.js
代码小学僧11 小时前
🎉 在 Tailwind 中愉快的使用 Antd Design 色彩
前端·css·react.js
ssshooter11 小时前
复习 CSS Flex 和 Grid 布局
前端·css·html
_请输入用户名11 小时前
EventEmitter 是广播,Tapable 是流水线:聊聊它们的本质区别
前端·设计模式