-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
Loading chunk {n} failed #742
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Please provide a repository to reproduce this error or an example online by forking https://glitch.com/edit/#!/nuxt-hello-world. Then I'll re-open the issue. |
Well as soon as I can reproduce the error I will send you, it appears periodically. |
Hi @atinux
I'm getting the same error after I don't know how to reproduce this on a small project. I also see this on terminal when building
Hope this can give a clue on this issue Thanks! |
I have same issue. When the app get bigger, more code will be compiled from webpack. Then you will get this error more often. Not sure how to fix this! |
@vinhtq I was thinking of that, I'm planning to start a clean project and keep adding things one by one to see the breaking point but don't know if it's worth it. Cheers! |
The new version of nuxtjs RC11 talking some fixes about this issue
Try to update to the latest version to see if the issue still exists |
I'm still getting the error. Thanks! |
I also experience it in latest version(V1.3x). In development mode, it is ok, but in production mode, you can meet this error sometimes. |
I'm having this issue as well anyone know any solutions? |
@campope did you configure your router manually? |
Nope running in universal mode using only page and folder names for routes. |
Experiencing this issue as well |
I'm not sure, but I currently guess that the reason for this bug is wrong caching of your service worker. |
Same here @ IE11 Only... |
In the past 2-3 months I have got this issue, irregular, mobile devices... |
Experiencing this issue as well |
Found the reason on our project, verify that you are not importing any nuxt-* (nuxt-link, nuxt-child, etc..) modules inside your components, they're preloaded. (WebStorm imports automatically when completing the typing) |
Still have this error on mobile devices with slow connection. @aviramaz we are used JetBrains IDE too (PyCharm, Python adapted analog of WebStorm), but no nuxt* imports were found. |
Still occurs with v1.4 in production mode. Project runs pretty much using the default template. Can happen on both desktop and mobile. |
Same issue. |
i solved this problem with pm2 kill after i checked nested page component |
@ac88 buddy, what's the solution for that ? |
@aviramaz can you please clarify – you say, that problem is that some component is missing ? |
maybe chunk routes name Dynamic Nested Routes must be keep to https://nuxtjs.org/guide/routing#nested-routes |
@ac88 i don't have such structure inside project – but problem still exist |
Hello I'm getting this issue as well in development mode. I have a small app here on https://github.com/tonycen23/nuxt-routing-bug. The bug can be found on localhost:3000/advertisers. |
@tonycen23 @atinux |
@atinux |
I just experienced this on my live site. The site is running in production mode with no service worker, and runs with
I'm worried that any site deploy could break the SPA for my live users and cause them to need a refresh. In this case, the |
@tctimmeh same situation same problem. |
@tctimmeh Yes, I modified error.vue to identify this error and refresh it automatically to fixed this issue. |
@yoyo837 i guess something like that should be implemented in nuxt itself. Can you share your code for identifying this error? |
This is due to code-splitting and would produce the same on any Vue application. The only solution is to keep the old files when deploying the new app, so the best is to upload to a CDN every time you deploy, so the old files are not deleted. But I guess what we can do is to check this error and do a hard reload to avoid doing so? cc @pi0 @clarkdo |
@aldarund <template>
<section class="container container-pd text-center" v-show="showError">
<h1 class="title" :class="{'chunkfailed-title' : isChunkLoadingFailed}">
{{ isChunkLoadingFailed ? '页面加载失败' : error.statusCode }}
</h1>
<h2 class="info" :class="{'chunkfailed-info' : isChunkLoadingFailed}">
{{ isChunkLoadingFailed ? '该页面内容可能已变更并重新实现,将自动刷新页面。如未自动刷新,您的网络可能遭遇劫持,请手动刷新重试' : error.message }}
</h2>
<nuxt-link class="button" to="/" v-if="error.statusCode === 404">
返回首页
</nuxt-link>
</section>
</template>
<script>
import utils from '../components/utils'
import popup from '../components/popup'
export default {
props: ['error'],
// head() {
// return {
// title: this.showError ? '错误' : '处理中...'
// }
// },
mounted() {
if (this.error == null) {
popup.alert('应用出现错误,但未能获得错误信息')
return
}
if (this.error.statusCode === 404) { // 404
const mt = /^\/page\/(\d+)$/g.exec(this.$route.path)
if (mt && mt.length === 2) { // 没有实现此页面
const query = this.$route.query || {}
location.replace(`/page.shtml?id=${mt[1]}${Object.keys(query).length > 0 ? '&' : ''}${utils.serialize(query)}`)
return
}
}
// webpack error
if (this.error.statusCode === 500 && /^Loading chunk (\d)+ failed\./.test(this.error.message)) {
this.isChunkLoadingFailed = true
}
this.showError = true
},
data() {
return {
showError: false,
isChunkLoadingFailed: false
}
}
}
</script>
<style lang="scss">
@import '~@/assets/css/app.scss';
</style>
<style scoped>
.title {
margin-top: 15px;
font-size: 5em;
}
.info {
font-weight: 300;
color: #9aabb1;
margin: 20px 0;
}
.chunkfailed-title {
font-size: 2.5em
}
.chunkfailed-info {
font-size: 20px;
}
</style>
global : window.serverRebuildHook = function() {
popup.alert('服务器版本已更新,正在刷新本地缓存,请稍后...', {
duration: 1000 * 5,
callback: () => {
location.replace(location.href)
}
})
}
router.all(/\.js$/, async function(request, response, next) {
if (!config.dev) {
const jsFilePath = request.url.split('?')[0]
if (jsFilePath.startsWith(nuxt.options.build.publicPath)) {
const srcBuiltPath = path.resolve(nuxt.options.buildDir, 'dist', jsFilePath.substr(nuxt.options.build.publicPath.length))
const y = await myfs.exists(srcBuiltPath)
if (!y) {
// console.log(request.url, request.headers.referer)
// response.redirect('/')
response.setHeader('Content-Type', 'application/javascript; charset=UTF-8')
response.setHeader('Accept-Ranges', 'bytes')
response.setHeader('Vary', 'Accept-Encoding')
response.setHeader('Transfer-Encoding', 'chunked')
response.setHeader('Last-Modified', new Date().toUTCString())
response.setHeader('Cache-Control', 'no-cache')
response.send('window.serverRebuildHook && window.serverRebuildHook();')
return
}
}
}
next()
}, nuxt.render) |
Discussion going on: #3389 |
I solved it on my end by prepending a dot to "publicPath" outuput option in my webpack config file.
|
The same issue.
|
I'm trying to implement the solution provided by @yoyo837 but having some platform specific issues so here's to hoping someone has a better grasp on this.. However; runtime in heroku the dist-folder doesn't seem to exist in the ".nuxt"-folder: [ .. So:
I'll admit I'm not all to experienced in Heroku hosting but surely the dist folder must exist because the site works perfectly. Anyone has a handle on this? |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Hello, when loading the page, there is an error loading chunk {n} (n - some number) failed how to fix it? Thanks in advance!
The text was updated successfully, but these errors were encountered: