Webpack error on Angular website

Viewed 853

I use Webpack for an Angular 2 website. When I build it and upload it on my server, I test it in different machines and it works without any error. However, in most of my client's computers, the page doesn't load at all and it has the following error on console:

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 don't have experience on Webpack, I don't know what other files/code do you need to identify the error. I spent 2 days on Google to find something similar, but in most of the cases, the authors could reproduce the error. I cannot reproduce it on any of my machine. But I have verified it on my client's machines.

Those are from my local, dev machine:

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 the 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 the webpack.dev and here the webpack.prod

The order of scripts on my 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>
1 Answers
Related