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.