Hi @alekseyLymarev

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

[nuxt] Error while initializing app Error: Loading chunk 6 failed.

I'm getting the same error after build and start
I'm using the express server example and router mode as history

I don't know how to reproduce this on a small project.
I can tell that in Network inspector I see /_nuxt/pages/.37ce4084c1c2cef60da2.js cannot be found (404 Not Found)

I also see this on terminal when building

                        Asset       Size        Chunks               Chunk Names
pages/.37ce4084c1c2cef60da2.js  677 bytes       6  [emitted]         pages/

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

• Fix problem with route chunk names webpackChunkName get undefined #1461
• Fix maximum call stack size exceeded Maximum call stack size exceeded #582
• Fix compile error when using scrollBehavior fix: compile error when using scrollBehavior #1517

Try to update to the latest version to see if the issue still exists

I'm still getting the error.
I'll do the decompose thing because it's been a roller coaster experimental project.

Thanks!

Thanks @vinhtq it was the chunk routes name as described in #1461
I had to use a router template, that's the danger of making router manually to support language routes

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 have no idea how to fix it~

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.
By checking server log, found that first-time fetching url was '/_nuxt/pages/something.js'.
And from the second time, the url becomes '//_nuxt/pages/something.js', and returns 404.
And that's the error chunk num in manifest.js.

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
I have the same problem here with similar url for personal project => http://localhost:3000/my/adverts
Looks like 'adverts' or 'advert...' whatever path is guilty
I tested it out changing path by '/my/badverts' and worked like a charm ...
I dig it more and found an article https://medium.com/@mbrevda/just-make-sure-ad-isnt-being-used-as-a-class-name-prefix-or-you-might-suffer-the-wrath-of-the-558d65502793 reference here https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b.
It seems having an ad blocker like AdBlock is the problem. I disabled it and I've been able to access initial url http://localhost:3000/my/adverts
No more chunk failed error

@Atinux
Thanks, that was the problem.

I just experienced this on my live site. The site is running in production mode with no service worker, and runs with resourceHints: false to limit the number of useless chunks downloaded. The sequence of events was as follows:

1. User opened the site home page
2. New version of the app was deployed to web servers
3. User clicked a link to another page within the nuxt SPA
4. User saw Loading chunk 2 failed message instead of the new page content

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 .js chunks are being served directly from the web servers (no CDN). My guess is that this happened because the old chunks don't exist any more in the newly deployed containers and that caching and serving from CDN would have prevented this.

@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
my code:
layouts/error.vue

<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)
      }
    })
  }

server/index.js :

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.

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  },

The same issue.

[vue-router] Failed to resolve async component default: Error: Loading chunk vendors~second-chunk failed.
(error: http://localhost:8080/vendors~second-chunk.js)
[vue-router] uncaught error during route navigation:
Error: Loading chunk vendors~second-chunk failed.
(error: http://localhost:8080/vendors~second-chunk.js)
    at HTMLScriptElement.onScriptComplete (app.js:819)

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..
I'm hosting my app on heroku which runs the "yarn run build"-command in the heroku-postbuild script, building all the files to the ".nuxt/dist"-folder. When I run it locally I can access the "dist"-folder w/o any problem.

However; runtime in heroku the dist-folder doesn't seem to exist in the ".nuxt"-folder:

[
'App.js',
'client.js',
'components',
'index.js',
'empty.js',
'google-tag-manager.js',
'router.js',
'server.js',
'loading.html',
'middleware.js',
'store.js',
'utils.js',
'views'
]

.. So:

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 fs.existsSync(srcBuiltPath) // <- ALWAYS FALSE SINCE 'DIST' FOLDER DONT EXIST IN THE CONTEXT
      if (!y) {
...
      }
    }
  }
  next()
}, nuxt.render)

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.