Skip to content
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

Loading chunk {n} failed #742

Closed
alekseyLymarev opened this issue May 20, 2017 · 40 comments

Comments

Projects
None yet
@alekseyLymarev
Copy link

commented May 20, 2017

Hello, when loading the page, there is an error loading chunk {n} (n - some number) failed how to fix it? Thanks in advance!

This bug report is available on Nuxt.js community (#c636)

@Atinux Atinux added the need repro label May 20, 2017

@Atinux

This comment has been minimized.

Copy link
Member

commented May 20, 2017

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.

@Atinux Atinux closed this May 20, 2017

@alekseyLymarev

This comment has been minimized.

Copy link
Author

commented May 20, 2017

Well as soon as I can reproduce the error I will send you, it appears periodically.

@epartipilo

This comment has been minimized.

Copy link

commented Sep 19, 2017

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!

@vinhtq

This comment has been minimized.

Copy link

commented Oct 5, 2017

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!

@epartipilo

This comment has been minimized.

Copy link

commented Oct 5, 2017

@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!

@vinhtq

This comment has been minimized.

Copy link

commented Oct 5, 2017

The new version of nuxtjs RC11 talking some fixes about this issue

  • Fix problem with route chunk names #1461
  • Fix maximum call stack size exceeded #582
  • Fix compile error when using scrollBehavior #1517

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

@epartipilo

This comment has been minimized.

Copy link

commented Oct 5, 2017

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

Thanks!

@epartipilo

This comment has been minimized.

Copy link

commented Oct 31, 2017

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

@xxxxxMiss

This comment has been minimized.

Copy link

commented Feb 9, 2018

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~

@campope

This comment has been minimized.

Copy link

commented Feb 24, 2018

I'm having this issue as well anyone know any solutions?

@epartipilo

This comment has been minimized.

Copy link

commented Feb 26, 2018

@campope did you configure your router manually?

@campope

This comment has been minimized.

Copy link

commented Feb 26, 2018

Nope running in universal mode using only page and folder names for routes.

@manniL

This comment has been minimized.

Copy link
Member

commented Mar 12, 2018

Experiencing this issue as well

@manniL

This comment has been minimized.

Copy link
Member

commented Mar 12, 2018

I'm not sure, but I currently guess that the reason for this bug is wrong caching of your service worker.

@aviramaz

This comment has been minimized.

Copy link

commented Mar 19, 2018

Same here @ IE11 Only...

@yoyo837

This comment has been minimized.

Copy link
Contributor

commented Mar 22, 2018

In the past 2-3 months I have got this issue, irregular, mobile devices...

@chenxiaoqiang123

This comment has been minimized.

Copy link

commented Mar 26, 2018

Experiencing this issue as well

@aviramaz

This comment has been minimized.

Copy link

commented Mar 29, 2018

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)

@applecat

This comment has been minimized.

Copy link

commented Apr 27, 2018

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.

@thenickname

This comment has been minimized.

Copy link

commented May 1, 2018

Still occurs with v1.4 in production mode.

Project runs pretty much using the default template.

Can happen on both desktop and mobile.

@JackAtlas

This comment has been minimized.

Copy link

commented May 4, 2018

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.

@ac88

This comment has been minimized.

Copy link

commented May 7, 2018

i solved this problem with pm2 kill after i checked nested page component

@vladimirlukyanov

This comment has been minimized.

Copy link

commented May 15, 2018

@ac88 buddy, what's the solution for that ?

@vladimirlukyanov

This comment has been minimized.

Copy link

commented May 15, 2018

@aviramaz can you please clarify – you say, that problem is that some component is missing ?

@ac88

This comment has been minimized.

Copy link

commented May 15, 2018

maybe chunk routes name

Dynamic Nested Routes must be keep to https://nuxtjs.org/guide/routing#nested-routes

@vladimirlukyanov

This comment has been minimized.

Copy link

commented May 15, 2018

@ac88 i don't have such structure inside project – but problem still exist

@tonycen23

This comment has been minimized.

Copy link

commented May 17, 2018

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.

@flrnt

This comment has been minimized.

Copy link

commented May 24, 2018

@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

@tonycen23

This comment has been minimized.

Copy link

commented May 24, 2018

@Atinux
Thanks, that was the problem.

@tctimmeh

This comment has been minimized.

Copy link

commented May 26, 2018

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.

@aldarund

This comment has been minimized.

Copy link
Member

commented May 26, 2018

@tctimmeh same situation same problem.

@yoyo837

This comment has been minimized.

Copy link
Contributor

commented May 26, 2018

@tctimmeh Yes, I modified error.vue to identify this error and refresh it automatically to fixed this issue.

@aldarund

This comment has been minimized.

Copy link
Member

commented May 31, 2018

@yoyo837 i guess something like that should be implemented in nuxt itself. Can you share your code for identifying this error?

@Atinux

This comment has been minimized.

Copy link
Member

commented Jun 1, 2018

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

@Atinux Atinux reopened this Jun 1, 2018

@yoyo837

This comment has been minimized.

Copy link
Contributor

commented Jun 1, 2018

@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)
@Atinux

This comment has been minimized.

Copy link
Member

commented Aug 6, 2018

Discussion going on: #3389

@feload

This comment has been minimized.

Copy link

commented Aug 21, 2018

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'
  },
@alexpilugin

This comment has been minimized.

Copy link

commented Sep 19, 2018

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)
@b3itgustaf

This comment has been minimized.

Copy link

commented Sep 21, 2018

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?

@lock

This comment has been minimized.

Copy link

commented Oct 31, 2018

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.

@lock lock bot locked as resolved and limited conversation to collaborators Oct 31, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.