webpack: Uncaught (in promise) Error: Loading chunk # failed.

Bug report

Uncaught (in promise) Error: Loading chunk # failed. after rolling update.

What is the current behavior? I have a kubernetes cluster with a couple of pods running an image of a web app build with webpack. When I build a new image and deploy it to the pods (rolling update), the web app can’t be loaded and I get error: Uncaught (in promise) Error: Loading chunk <whatever chunk number> failed. in web browser console after reloading the web app.

If the current behavior is a bug, please provide the steps to reproduce. Basically, webpack runs on Google container builder. The web app is built with docker. Once the docker build is done, the image with the new build of the web app is deployed to kubernetes (rolling update). While new pods are created and running with the new version of the web app can’t be loaded.

What is the expected behavior? The web app should load smoothly update after update.

Other relevant information: webpack version: 4.11.1 Node.js version: 8.11 Operating System: CoreOS Additional tools: Docker, Kubernetes (on Google Cloud)

PS: Actually I am not 100% sure if this is a problem directly link to webpack but a combinaison with kubernetes. As I am writing this bug report, I sort figured out the rolling update might the problem as two different versions of the web app is living as long all the pods are not using the last image.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 20
Comments: 34 (4 by maintainers)

Links to this issue

typescript - Internet explorer & Angular 6 ERROR Error: Uncaught (in promise): Error: Loading chunk - Stack Overflow

Commits related to this issue

Added publicPath to output Without this i was finding that webpack wasn't able to find the file which was being dynamically imported which was also reported here https://github.com/webpack/webpack/is... — committed to qasimalyas/webpack.js.org by qasimalyas 6 years ago

Most upvoted comments

ovaldi on Jul 30, 2018

I’m also having this issue too

qasimalyas on Aug 1, 2018

This happens if a chunk could not be loaded, which will happen more often on mobile due to poor connections. You need to have some error handling in case a chunk failed to load, such as asking the user to reload the page.

jacobrask on Nov 16, 2018

We are seeing this issue in our sentry from iOs mobile safari users. It doesn’t seem related to the version of iOs or safari. It certainly seems like an issue with webpack itself.

Its very hard to debug as its not happening consistently. Here is our webpack config / dependencies in package.json, hope it helps:

const path = require('path');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
const SentryCliPlugin = require('@sentry/webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var StatsPlugin = require('stats-webpack-plugin');

module.exports = {
  name: 'client',
  target: 'web',
  entry: ['regenerator-runtime/runtime.js', path.resolve(__dirname, '../src/index.tsx')],
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, '../dist/client'),
    publicPath: '/static/'
  },
  devtool: false,
  stats: 'normal',
  module: {
    rules: [
      {
        test: [ /\.ts$/, /\.tsx$/, /\.js$/ ],
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/env'
            ]
          ]
        }
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'graphql-tag/loader'
          }
        ]
      }
    ]
  },
  mode: 'production',
  resolve: {
    modules: [ path.resolve(__dirname, '../src'), 'node_modules' ],
    extensions: ['.mjs', '.ts', '.tsx', '.js', '.graphql', '.gql']
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: false
    }),
    new StatsPlugin('stats.json', {
      chunkModules: true
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HashedModuleIdsPlugin(),
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$/,
      minRatio: 0.8
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static'
    }),
    new webpack.SourceMapDevToolPlugin({
      append: false,
      filename: '../maps/[file].map'
    }),
    new SentryCliPlugin({
      release: process.env.HEROKU_RELEASE_VERSION,
      include: path.resolve(__dirname, '../dist/client'),
      validate: true,
      dryRun: !process.env.SENTRY_AUTH_TOKEN
    }),
  ]
};

  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@dubsmash/dubsmash-tracking": "1.1.9",
    "@sentry/browser": "^4.0.6",
    "@types/classnames": "^2.2.6",
    "@types/react-swipeable": "^4.2.2",
    "abort-controller": "^1.0.2",
    "apollo": "^1.6.0",
    "apollo-cache-inmemory": "^1.3.6",
    "apollo-client": "^2.4.3",
    "apollo-link": "^1.2.3",
    "apollo-link-error": "^1.1.1",
    "apollo-link-http": "^1.5.5",
    "apollo-link-state": "^0.4.2",
    "btoa": "^1.2.1",
    "classnames": "^2.2.6",
    "clipboard-polyfill": "^2.5.4",
    "compression": "^1.7.3",
    "express-static-gzip": "^1.0.0",
    "graphql": "^14.0.2",
    "history": "^4.7.2",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.0",
    "lodash.debounce": "^4.0.8",
    "lodash.merge": "^4.6.1",
    "querystring": "^0.2.0",
    "raven": "^2.6.3",
    "react": "^16.5.2",
    "react-adopt": "^0.6.0",
    "react-apollo": "^2.1.9",
    "react-dom": "^16.5.2",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "^4.3.4",
    "react-jss": "^8.6.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-swipeable": "^4.3.0",
    "react-tree-walker": "^4.2.0",
    "reset-jss": "^1.0.0",
    "srt-to-vtt": "^1.1.3",
    "uuid": "^3.3.2",
    "webpack-flush-chunks": "^2.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.1.0",
    "@sentry/webpack-plugin": "^1.6.1",
    "@types/btoa": "^1.2.0",
    "@types/enzyme": "^3.1.13",
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/enzyme-to-json": "^1.5.2",
    "@types/express": "^4.16.0",
    "@types/google.analytics": "^0.0.39",
    "@types/history": "^4.6.2",
    "@types/isomorphic-fetch": "^0.0.34",
    "@types/jest": "^23.3.1",
    "@types/js-cookie": "^2.2.0",
    "@types/jss": "^9.5.6",
    "@types/lodash.debounce": "^4.0.4",
    "@types/lodash.merge": "^4.6.4",
    "@types/query-string": "^6.1.0",
    "@types/raven": "^2.5.1",
    "@types/react": "^16.4.7",
    "@types/react-dom": "^16.0.6",
    "@types/react-helmet": "^5.0.6",
    "@types/react-router": "^4.0.30",
    "@types/react-router-dom": "^4.3.0",
    "@types/uuid": "^3.4.3",
    "@types/webpack-env": "^1.13.6",
    "apollo-codegen": "^0.20.2",
    "apollo-link-schema": "^1.1.0",
    "array.prototype.flatmap": "^1.2.1",
    "babel-loader": "^8.0.4",
    "commander": "^2.17.1",
    "compression-webpack-plugin": "^2.0.0",
    "cookie-parser": "^1.4.3",
    "cross-env": "^5.2.0",
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "enzyme-to-json": "^3.3.4",
    "express": "^4.16.3",
    "fork-ts-checker-webpack-plugin": "^0.4.9",
    "gaze": "^1.1.3",
    "get-graphql-schema": "^2.1.1",
    "glob": "^7.1.2",
    "gql2ts": "^1.9.0",
    "graphql-tools": "^3.1.1",
    "helmet": "^3.13.0",
    "html-webpack-plugin": "^3.2.0",
    "html-webpack-template": "^6.2.0",
    "husky": "^0.14.3",
    "jest": "^23.5.0",
    "jest-transform-graphql": "^2.1.0",
    "jss-snapshot-serializer": "^1.0.0",
    "lint-staged": "7.0.5",
    "merge-graphql-schemas": "^1.5.3",
    "morgan": "^1.9.0",
    "nightwatch": "^0.9.21",
    "pm2": "^3.2.2",
    "regenerator-runtime": "^0.12.0",
    "source-map-loader": "^0.2.3",
    "stats-webpack-plugin": "^0.7.0",
    "ts-jest": "^23.1.4",
    "ts-loader": "^5.1.0",
    "tslint": "^5.11.0",
    "tslint-eslint-rules": "^5.3.1",
    "tslint-react": "^3.6.0",
    "typescript": "^3.0.1",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.16.2",
    "webpack-bundle-analyzer": "^3.0.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-dev-server": "^3.1.5",
    "webpack-hot-middleware": "^2.22.3",
    "webpack-hot-server-middleware": "^0.5.0",
    "write-file-webpack-plugin": "^4.3.2"
  },

realalexhomer on Nov 2, 2018

Same issue.

wjurmy on Aug 7, 2018

It is network problem. Better solution is not use lazy load modules 😊

От: 离上的风 notifications@github.com Отправлено: Monday, December 3, 2018 7:28:45 AM Кому: webpack/webpack Копия: Sergey S. Volkov; Mention Тема: Re: [webpack/webpack] Uncaught (in promise) Error: Loading chunk # failed. (#7502)

Have any methods for it?I have same issue

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/webpack/webpack/issues/7502#issuecomment-443585515, or mute the threadhttps://github.com/notifications/unsubscribe-auth/APlXr_NBkbBm7H8zg1ybuwZpMM5SUX2fks5u1Kh9gaJpZM4Ue2ZF.

js2me on Dec 3, 2018

Just experienced the same problem with the ‘Missing Chunk’ Console Error in Chrome. This was a lazy loaded component that I recently made changes to and was unable to access it in my browser to verify the view. Was going a bit nuts trying to track down the problem when all I had to do was do a ‘Empty Cache and Hard Reload’ in Chrome (even though I already had my Dev Tools open with Cache disabled) which solved my ‘Missing Chunk’ issue.

nthompson777 on Nov 29, 2018

@realalexhomer @jacobrask Thanks guys, I think I will keep in the server always one version back. that way I reduce the chances of it to happen (still can happen if we push 2 new versions in small window of time but the chances are like 0.1%).

by the way @jacobrask how can catch that kind of error so ill be able to pop a message?

royipressburger on Nov 22, 2018