Clever Geek Handbook

Webpack error on Angular website

I am using Webpack for an Angular 2 website. When I build it and upload it to my server, I test it on different machines and it works without error. However, on most of my client computers, the page does not load at all and on the console it has the following error:

polyfills.0538e73….bundle.js:1 Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1) at Object.<anonymous> 
(main.c4452dc….bundle.js:1) at __webpack_require__ 
(polyfills.0538e73….bundle.js:1)

Since I have no experience with Webpack, I don't know what other files / code you need to identify the error. I spent 2 days on Google to find something similar, but in most cases the authors could reproduce the bug. I cannot reproduce it on any of my machines. But I tested it on my client machines.

These are my local, dev machines:

node --version: v7.5.0

npm --version: 4.1.2

Those on my production server:

node --version: v6.10.3

npm --version: 3.10.10

and tsconfig.json 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmitHelpers": true,
    "strictNullChecks": false,
    "baseUrl": "./src",
    "paths": {
    },
    "lib": [
      "dom",
      "es6"
    ],
    "types": [
      "hammerjs",
      "node",
      "source-map",
      "uglify-js",
      "webpack"
    ]
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

the webpack.config.ts 

// Look in ./config folder for webpack.dev.js
switch (process.env.NODE_ENV) {
  case 'prod':
  case 'production':
    module.exports = require('./config/webpack.prod')({env: 'production'});
    break;
  case 'dev':
  case 'development':
  default:
    module.exports = require('./config/webpack.dev')({env: 'development'});
}

Here is webpack.dev and here is webpack. prod

The order of the scripts on mine index.html 

<script type="text/javascript" src="polyfills.0538e73c900216f4d2d0.bundle.js" defer></script>
<script type="text/javascript" src="vendor.e1aa59d8e719a224eb3a.bundle.js" defer></script>
<script type="text/javascript" src="main.c4452dc09fbc13bd7362.bundle.js" defer></script>
+3


source to share


1 answer


This issue is most likely caused by the order in which the scripts are loaded. Assuming you have three chunks of scripts named polyfill, vendor and main, please go to the inline index.html

, which is loaded by scripts in the following order:

  • polyfills
  • supplier
  • Main


To solve this, take a look at the HtmlWebpackPlugin config, usually in config/webpack.common.js

if your project is based on angular2-webpack-starter. It's something like this:

new HtmlWebpackPlugin({
  template: 'src/index.html',
  title: METADATA.title,
  chunksSortMode: 'dependency',   // <-- this is important
  metadata: METADATA,
  inject: 'head'
})
0


source






More articles:


All Articles