Uncaught TypeError: Cannot read property 'call' of undefined

[ryneflood]

• I'm submitting a ...
  [x ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
• What is the current behavior?
  loading app fails intermittently with error: Uncaught TypeError: Cannot read property 'call' of undefined
  

started a week or so ago when I upgraded from around the beta.8 versions. In the mean time I've tried starting from a fresh copy of the starter, it'll work fine for a while but eventually it'll fail on that error. Sometimes it'll fail after just adding a new

to an HTML template, or even just restarting the dev server

eventually the error is on this line:
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

it appears intermittently and seems to be random, it'll work one minute, and then fail the next. Making a couple changes (to nothing in particular) and restarting the dev server sometimes fixes it. And other times the app will be working fine but simply restarting the dev server will produce the error.

the same code also works fine when in a JSPM based build

• Please tell us about your environment:

Node: v5.9.0
NPM: 3.7.3
Using the latest code from repo as of March 22/2016

• Angular version: 2.0.0-beta.11

happens in multiple browsers (Firefox, Chrome, Opera)

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

polyfills.bundle.js:575 Uncaught TypeError: Cannot read property 'call' of undefined__webpack_require__ @ polyfills.bundle.js:575fn @ polyfills.bundle.js:99(anonymous function) @ main.browser.ts:5(anonymous function) @ main.bundle.js:734__webpack_require__ @ polyfills.bundle.js:575fn @ polyfills.bundle.js:99(anonymous function) @ multi_main:3(anonymous function) @ main.bundle.js:5__webpack_require__ @ polyfills.bundle.js:575webpackJsonpCallback @ polyfills.bundle.js:22(anonymous function) @ main.bundle.js:1

[sasidhar]

+1
Facing the same issue and it is intermittent.
With the earlier releases (till Angular 2 Beta 9) it was working fine and we are using Bootstrap, jQuery, jQuery UI, jQuery Datepicker, Timepicker and Date range picker without any issues.

When we update to recent commits (with Beta 11) we are facing the same issue as mentioned by @ryneflood

We tried this

• Running npm run server:dev
• Disabled entire jQuery and all it's plugins : Working fine.
• When we move to pages where jQuery used : it is giving error like jQuery not found
• Enabled jQuery using ProvidePlugin in Webpack config and re-run npm run server:dev : jQuery found.
• When we move to pages where jQuery UI Datepicker is used : jQuery(...).datepicker(....) not found
• Imported jQuery UI along with other plugins in main.browser.ts
• Browser refreshed and all are working fine.
• Stopped npm run server:dev
• Re-run npm run server:dev
• Getting Cannot read property 'call' of undefined error. Which was working fine previously

Tried to debug the error and found Webpack moduleId (170 in our case) not found and modules[moduleId] returning undefined.

Tried developer tool's Error call stack : it is showing error in the first line of main.browser.ts

Any suggestions on debugging this issue would be great.

[ryneflood]

OK so after a LOT of digging/playing around it seems like my issue is related to require()'ing css styles in components. I'm currently using PostCSS as outlined here: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-PostCSS , but it also affects using SASS as suggested here: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components
The error also occurs when require()'ing vanilla CSS using the 'raw-loader' which is included by default in the webpack config file

If I remove all instances where I require() css in components the issue goes away

Let me know if I can provide any more details to help get this fixed up!

[ryneflood]

this code also needs to be disabled for it to work properly: (from main.browser.ts), once it's commented out and I unwrap the angular bootstrap function from the main() function it gets rid of the error

/*
 * Hot Module Reload
 * experimental version by @gdi2290
 // */
if ('development' === ENV && HMR === true) {
  // activate hot module reload
  hotModuleReplacement(main, module);
} else {
  // bootstrap when documetn is ready
  document.addEventListener('DOMContentLoaded', () => main());
}

[mburger81]

Same problem here
@ryneflood can you show us how do do "unwrap the angular bootstrap function from the main()"

thx

[mburger81]

@ryneflood what do you mean with "unwrap the angular bootstrap function from the main()"

[mburger81]

I tried some things but nothing worked for me,

I commented anything from @gdi2290 experimental code then document.addEventListener('DOMContentLoaded', () => main()); but same error

I include code from an old commit before main.browser.ts

if ('development' === ENV) {
    // activate hot module reload
    if (HMR) {
        if (document.readyState === 'complete') {
            main();
        } else {
            bootstrapDomReady();
        }
        module.hot.accept();
    } else {
        bootstrapDomReady();
    }
} else {
    bootstrapDomReady();
}

but it is still the same error! some ideas?

[penmark]

I am also having this issue, havent' been able to pin down which exact versions of webpack/angular which causes this.
#426 seems related.

[mburger81]

@penmark can you trying what @ryneflood wrote, I'm not sure what to do or I do the right thing but it doesn't solve the problem for me.

[zatomik]

+1 as above in Chrome, in firefox the error thrown is TypeError: modules[moduleId] is undefined

[mburger81]

@zatomik can you test @ryneflood solution, if it works for you?

[mburger81]

@gdi2290
I copyied into main.browser.ts the old main.ts from version 3.0.0 and now this resolves this error. But there are several new erros like that one

[penmark]

@mburger81 using main.ts from 3.0.0 works for me as well

[mburger81]

@penmark do you have no other problems like me?
@gdi2290 I'm not able to revert to an older version, I have many more problems. Coping main.ts resolves the issue discussed here, but then I have the problem describe two posts before, revert entire project to an known working commit opens other bugs like this:
Uncaught TypeError: crypto.randomBytes is not a function
before migratint to angular2-webpack-starter 4.0.0 I update my webpack und webpack-dev server and others, and probably this are not compatible with my old app.

So I don't know how to resolves the problems

[zatomik]

@mburger81 no it doesnt work for me, neither does using the old main.ts, however have noticed that if I disable one of my nested routes the problem goes away.

[cloudlena]

I'm experiencing the same issue. I think this is a general Webpack problem...
webpack/webpack#959

[zatomik]

I've narrowed my problem down to an import statement in one of my components, changed it from
import {Observable} from 'rxjs/Rx';
to
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin'

Seems to be working fine now.

[ryneflood]

@mburger81 "unwrapping" the angular bootstrap from the main function just means:

export function main(initialState = {}) {
  let APP_PROVIDERS = [
    provideInitialState(initialState),
    AppState
  ];

  return bootstrap(App, [
    ...ENV_PROVIDERS,
    ...PROVIDERS,
    ...DIRECTIVES,
    ...PIPES,
    ...APP_PROVIDERS,
    provideStore({ config }),
    installSagaMiddleware(...CONFIG_SAGAS),
    ModelService
  ])
  .catch(err => console.error(err));
}

becomes:

bootstrap(App, [
  ...ENV_PROVIDERS,
  ...PROVIDERS,
  ...DIRECTIVES,
  ...PIPES


]).catch(err => console.log(err));

so the bootstrap is called immediately instead of waiting for something else to call main();
before there was an event listening added to call main() on 'DOMContentLoaded'. I've also stripped out anything extra like the AppState stuff...just to get it working for now

[mburger81]

@ryneflood
that's obviously something that I have done, but the result was still the same!!!

It's a little bit frustrating, I'm not able to get working my old stuff before I updated. I think all the problems came from webpack but I'm not sure!

I have no idea what else I can try to do

[ryneflood]

yeah this is still popping up for me. Anybody have any fixes?

[mburger81]

No solutions?

[edezacas]

I haven't found out the solution, but I've modified the webpack.config.js, removing vendor from CommonsChunkPlugin and now is working ok.

So the possible workaround is change from webpack.config.js:

new webpack.optimize.CommonsChunkPlugin({name: ['app', 'vendor', 'polyfills'], minChunks: Infinity}),

to

new webpack.optimize.CommonsChunkPlugin({name: ['app', 'polyfills'], minChunks: Infinity}),

It's not the best solution, but meanwhile we can continue with our development.

[juristr]

@edezacas @mburger81 👍

[mburger81]

@gdi2290 @edezacas

After downloading last master and merging with our app I had no problem with CommonsChunkPlugin, so I can not say if that had resolved me something before, but I don't think so.

After merging, I had always the problems with beta.11 and ng2-bootstrap so I removed ng2-bootstrap every where from my app. After that my app works fine (with some layout and style bugs, beta11 problems?). But on creating my prodcution app I had still the same errors, see screenshot

After that I tried to set the UglifyJsPlugin in debug mode in webpack.prod.js and this resolves me the problem. JUHU

[ryneflood]

@edezacas removing vendor from CommonsChunkPlugin seems to be working for me, at least for now!

[jstri]

Yeah, for production just disable code mangling of uglifyjs. Check issue on angular repository.

[mburger81]

beta 12 is out

[cloudlena]

beta.12 doesn't seem to fix the problem for me... but removing vendor from the CommonsChunkPlugin does

[mburger81]

on beta.12 i still not need to set CommonsChunkPlugin but mangling still doesn't work on production.

[kamil-kielczewski]

I have similar problem. In my case change amount of code in html template (!!!!!) induce this error.

In webpack.config.js i comment line ('vendor') and it works but I don't know for how long...:

module.exports = {
...
  entry: {
    'polyfills': './src/polyfills.ts',
    //'vendor': './src/vendor.ts', 
    'main': './src/main.ts'
  },
...
}

[PatrickJS]

this problem should be fixed in the latest release. the problem was due to the order that the HtmlPlugin was injecting the scripts

[mburger81]

From Wednesday I had suddenly again this problem! Today I migrate to the latest master of angular-webpack-starter upgrading zone.js to 0.6.8 as described in a angular2 issue and the problem is still there! It's frustrating a little bit :|

polyfills.bundle.js:51 Uncaught TypeError: Cannot read property 'call' of undefined
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

Then I commend 'vendor': './src/vendor.ts', in webpack.common.js` and the APP works again
=)

[cloudlena]

I'm still having the problem with the latest version of the repo...

[mburger81]

@mastertinner tried to comment 'vendor': './src/vendor.ts' in webpack.common.js?

[cloudlena]

thanks, @mburger81. yes, i've tried that and it works. but it seems like more of a temporary solution to me.

[PatrickJS]

sorry the fix was removed when someone refactored the configs into a common one
f26985d

[kamil-kielczewski]

Ok I use your suggestion @gdi2290 - my project based on version of angular2-webpack-starter from near 1-3 march 2016. So I upgrade it manualy in this way:

In webpack.config.js I uncomment vendors in:

  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts', 
    'main': './src/main.ts'
  },

And replace line:

new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none' }),
by

    new HtmlWebpackPlugin({
      template: 'src/index.html',
      chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main'])
    }),

And replace this:

  resolve: {
    extensions: ['', '.ts', '.js']
  },

By this:

  resolve: {
    extensions: ['', '.ts', '.js'],
    // Make sure root is src
    root: helpers.root('src'),

    // remove other default values
    modulesDirectories: ['node_modules'],
  },

Then I replace body of helpers.js file (in the same directory than webpack.config.js in my version - but in current wersion this and other files was moved to 'config' directory) to this
https://github.com/AngularClass/angular2-webpack-starter/blob/f26985da68c5e94742b204d682b9673ac093006b/config/helpers.js
(from commit: 2455adc )

But I change line (becouse in my version helpers.js file is in the same directory than webpack.config.js) :
var _root = path.resolve(__dirname, '..');
To
var _root = path.resolve(__dirname, '.');

And it seems that it WORKS ! :) (do I do it in proper way?)

[edezacas]

@gdi2290 I confirm your last update fix this issue.

[cloudlena]

Thanks, @gdi2290! That solved it.

[PatrickJS]

@kamil-kielczewski yup that's correct. awesome, I'm going to close this issue now that it's resolved

[IAMtheIAM]

I am still getting this error message today. Did it break again?

[tramel-woodard]

My issue is specifically triggered by adding an additional component (i.e. src/app/whatever/whatever.component.ts) and then adding a 'styleUrls' attribute.

Take out the styleUrls attribute and everything functions as normal.

[rmcsharry]

I just encountered this for the first time also on my prod build.

If I do as @edezacas suggests and remove 'vendor' in weback.common.js, it works:

    plugins:[
        new ExtractTextPlugin({filename: 'initial.css', allChunks: true}),
        new ForkCheckerPlugin(),

        new ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('src')
        ),
      
        new webpack.optimize.CommonsChunkPlugin({
            name: ['polyfills'].reverse()   <--- I removed 'vendor' from this line 
        }),

but I have no idea what the repercussions of removing vendor from that line are

[gjrtimmer]

Getting this error today. Anyone suggestions ?

Going to do some more research; found something else as well.

[kamil-kielczewski]

may be give us more details? (e.g. version of a2ws...)

[nag0538]

i am getting the same error.
loacl it works fine but in prod it fails randomly.

my webpack.config.js seems like this

 new CommonsChunkPlugin({
      "name": "inline",
      "minChunks": null
    }),
    new CommonsChunkPlugin({
      "name": "vendor",
      "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
      "chunks": [
        "main"
      ]
    }),

pls help me where i need to make changes

[mrdulin]

new webpack.optimize.CommonsChunkPlugin({
      names: ['polyfills', 'vendor'], //<- pay attention to the order.
      chunks: ['app'],
      minChunks: module => /node_modules/.test(module.resource)
    }),

[fahadrehman]

for me, it was fixed after clearing the browser cache

[deepika-Gopala]

Removing vendor from commonchunckplugin fixed the issue for me.:) thanks guys!

[dgpoo]

yes also working for me @deepika-Gopala
Thanx who has given this solution.
-"Removing vendor from commonchunckplugin"
by the way any one know the reason for it why we do that?

[davidperis92]

updating to node 9.2.0 fixed the issue for me

[plh97]

i have been fired beacause of this problem..

[hanshou101]

updating to node 9.2.0 fixed the issue for me

You're the hero saving my life time !