Uncaught TypeError: Cannot read property 'call' of undefined

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

@ryneflood

+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.

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!

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());
}

@ryneflood

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

thx

@ryneflood

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

@gdi2290

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?

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

@penmark

@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.

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

@zatomik

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

@gdi2290

@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

@mburger81

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

@penmark

@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

@mburger81

@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.

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

@kamil-kielczewski

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

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

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.

@edezacas

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

~~Getting this error today. Anyone suggestions ?~~

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

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

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

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

for me, it was fixed after clearing the browser cache

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

@deepika-Gopala

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?

updating to node 9.2.0 fixed the issue for me

i have been fired beacause of this problem..

updating to node 9.2.0 fixed the issue for me

You're the hero saving my life time !

Navigation Menu

Repository navigation

Uncaught TypeError: Cannot read property 'call' of undefined #456

23 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Uncaught TypeError: Cannot read property 'call' of undefined #456

Description

Activity

sasidhar commented on Mar 22, 2016

ryneflood commented on Mar 22, 2016

ryneflood commented on Mar 22, 2016

mburger81 commented on Mar 22, 2016

mburger81 commented on Mar 22, 2016

mburger81 commented on Mar 22, 2016

penmark commented on Mar 22, 2016

mburger81 commented on Mar 22, 2016

zatomik commented on Mar 22, 2016

mburger81 commented on Mar 22, 2016

mburger81 commented on Mar 22, 2016

penmark commented on Mar 22, 2016

mburger81 commented on Mar 22, 2016

zatomik commented on Mar 22, 2016

cloudlena commented on Mar 22, 2016

23 remaining items

PatrickJS commented on Apr 3, 2016

IAMtheIAM commented on May 4, 2016

tramel-woodard commented on Jan 20, 2017

rmcsharry commented on Feb 3, 2017

gjrtimmer commented on Mar 21, 2017

kamil-kielczewski commented on Mar 21, 2017

nag0538 commented on Jun 30, 2017

mrdulin commented on Aug 16, 2017

fahadrehman commented on Aug 31, 2017

deepika-Gopala commented on Nov 14, 2017

dgpoo commented on Nov 30, 2017

davidperis92 commented on Dec 11, 2017

plh97 commented on Aug 22, 2018

hanshou101 commented on Sep 13, 2018

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions