Skip to content

Loading chunk {n} failed #742

Closed
Closed
@alekseyLymarev

Description

@alekseyLymarev

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)

Activity

atinux

atinux commented on May 20, 2017

@atinux
Member

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.

alekseyLymarev

alekseyLymarev commented on May 20, 2017

@alekseyLymarev
Author

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

epartipilo

epartipilo commented on Sep 19, 2017

@epartipilo

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

vinhtq commented on Oct 5, 2017

@vinhtq

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

epartipilo commented on Oct 5, 2017

@epartipilo

@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

vinhtq commented on Oct 5, 2017

@vinhtq

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

epartipilo

epartipilo commented on Oct 5, 2017

@epartipilo

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

Thanks!

epartipilo

epartipilo commented on Oct 31, 2017

@epartipilo

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

xxxxxMiss commented on Feb 9, 2018

@xxxxxMiss

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

campope commented on Feb 24, 2018

@campope

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

epartipilo

epartipilo commented on Feb 26, 2018

@epartipilo

@campope did you configure your router manually?

campope

campope commented on Feb 26, 2018

@campope

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

TheAlexLichter

TheAlexLichter commented on Mar 12, 2018

@TheAlexLichter
Member

Experiencing this issue as well

18 remaining items

yoyo837

yoyo837 commented on May 26, 2018

@yoyo837

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

aldarund

aldarund commented on May 31, 2018

@aldarund

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

atinux

atinux commented on Jun 1, 2018

@atinux
Member

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

reopened this on Jun 1, 2018
yoyo837

yoyo837 commented on Jun 1, 2018

@yoyo837

@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

atinux commented on Aug 6, 2018

@atinux
Member

Discussion going on: #3389

feload

feload commented on Aug 21, 2018

@feload

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

alexpilugin commented on Sep 19, 2018

@alexpilugin

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

b3itgustaf commented on Sep 21, 2018

@b3itgustaf

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

lock commented on Oct 31, 2018

@lock

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.

locked as resolved and limited conversation to collaborators on Oct 31, 2018
added a commit that references this issue on May 8, 2024
a0eeea8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @applecat@aldarund@TheAlexLichter@atinux@thenickname

        Issue actions

          Loading chunk {n} failed · Issue #742 · nuxt/nuxt