DEV Community

John Peters
John Peters

Posted on

Uncaught TypeError: Cannot read property 'xyz' of undefined

If you saw this error when serving up an angular project, what would it mean?

core.js:36228 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:36228)
    at core.js:36246
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:36242)
    at core.js:36246
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:36242)
    at new NgModuleFactory$1 (core.js:36407)
    at compileNgModuleFactory__POST_R3__ (core.js:42296)
    at PlatformRef.bootstrapModule (core.js:42663)
Enter fullscreen mode Exit fullscreen mode

We can see this is very early in the bootstrap, and it's doing something with the ngModule attempting to register an NGModuleType of which it cannot read a property.

So Now What?

We are forced to go on an Angular module loading safari. A veritable rabbit hole; which no sprint knows the duration. 🍋🍋

We set a break here, in Angular.core.js land

function registerNgModuleType(ngModuleType) {
    if (ngModuleType.ɵmod.id !== null) {
        /** @type {?} */
        const id = ngModuleType.ɵmod.id;
        /** @type {?} */
        const existing = (/** @type {?} */ (modules.get(id)));
        assertSameOrNotExisting(id, existing, ngModuleType);
        modules.set(id, ngModuleType);
Enter fullscreen mode Exit fullscreen mode

We found that the error was thrown on the MatPaginator ngModuleType.

We were able to set a conditional breakpoint which allowed us to recreate the error with only one breakpoint each time.

Alt Text

This MatPaginator moduletype did not have an id, thus the error.

But Why?

Get back after the safari ends.

Top comments (16)

Collapse
 
efronic profile image
Efron

Hi John,
Thanks for this. Do you have a workaround for this issue?

Collapse
 
jwp profile image
John Peters • Edited

No workaround, just follow the advice of the article by setting a break point on the line before the failure. Then look at which module is having problems. From there make sure your package.json has that module loaded. What module do you see?

Collapse
 
keyboardbreaker profile image
Yu-Jin • Edited

how do you make sure that package.json has app.module loaded?

dev-to-uploads.s3.amazonaws.com/i/...

Thread Thread
 
jwp profile image
John Peters • Edited

In the breakpoint there should be a value for id and it's container object.

Thread Thread
 
jwp profile image
John Peters

App module is a part of bootstrap. Very early in run. I'm not sure why it wouldn't be first thing loaded.

Thread Thread
 
keyboardbreaker profile image
Yu-Jin

ok this is pretty much a failing on my behalf but I think you didnt make clear that you can step over to the next function call from that breakpoint, i just assumed that the breakpoint would show the culprit from the start.

which I never, hence it stops at the very beginning, app.module.

Thread Thread
 
keyboardbreaker profile image
Yu-Jin

this is a lifesaver. seriously! It confuses me to think I didn't try to step over from the breakpoint. was not thinking straight!

so my culprit module was: angular2-toaster, and in turn shall need to update it to: ngx-toastr

Thank you so much! :)

Thread Thread
 
jwp profile image
John Peters

Yes, I even created a bug with Angular team because they force the user to set breakpoints in their code to determine root cause. They should at least bubble the module name upward. But I'm finding that the Angular team, in general has no standards on error messaging throughout their code. This causes great pain down the road...

Collapse
 
hankchiutw profile image
Hank Chiu

Try executing npx ngcc manually.

Collapse
 
jwp profile image
John Peters • Edited

The next time I have this issue, I'll definitely try this. I think you are recommending this because it will show more information, right? Does NGCC use a different loader than this one? registerNgModuleType (core.js:36228)

Collapse
 
hankchiutw profile image
Hank Chiu

ngcc would compile your node_modules to be Ivy-compatible. In my case, I just add "postinstall": "ngcc" in package.json scripts to get rid of such errors.

Thread Thread
 
jwp profile image
John Peters

This is not a solution to problem described. Ng build uses ngcc

Collapse
 
linehammer profile image
linehammer

In JavaScript almost everything is an object, null and undefined are exceptions. This error occurs when a property is read or a function is called on an undefined variable. Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined.

If you are not sure a variable that will always have some value, the best practice is to check the value of variables for null or undefined before using them. To avoid getting these types of errors, you need to make sure that the variables you are trying to read do have the correct value. This can be done in various ways. You can do if checks before dealing with objects whose values are bound to change:

if (myVar !== undefined) {
...
}

Or

if (typeof(myVar) !== 'undefined') {
...
}

net-informations.com/js/iq/unerror...

Collapse
 
jwp profile image
John Peters

Not specifically helpful for the article. The problem was that an incomplete error message forced us to set breakpoints in Angular to find out why.

Collapse
 
alvarofelipe12 profile image
Alvaro Felipe GarcĂ­a MĂ©ndez • Edited

Thanks to this I've found that a translation library was having issues, then I've deleted the node_modules folder and run npm i and worked as before. Now... Did your safari end? xD

Collapse
 
jwp profile image
John Peters

Yes safari ended but have been on many others since then. :)