🐞[BUG]: 'NGXS_SELECTOR_META' of undefined at app init after ng9/ngxs3.6 update > better error message

See original GitHub issue

Affected Package

@ngxs/store

Is this a regression?

Yes, It was working with angular8.0.3/ngxs3.5.0 and the bug appears when I migrate to angular9.1.9/ngxs3.6.2

Description

I had a circular dependency warning from angular cli since long time. App was working well so I was not paying attention anymore… (not a good idea i know!) When I updated angular & ngxs, I got Cannot read property 'NGXS_SELECTOR_META' of undefined error at runtime app init and have totally no idea where it comes from!

After some times, I manage to find a way to avoid the error without understanding it: I use TS classes to group ngxs selectors and in a specific one, if I use @Selector() decorator, I got the error at app init. When I use createSelector() instead of @Selector() in this class all the app is working well like before the upgrade.

After some extra debug session, I finally understand the circular dependency was the cause.

You can reproduce it in the stackblitz below. I know that’s not really an ngxs bug but It would be great to have a better error message if possible… 😃

Initialy from this slack conversation with @markwhitfeld: https://ngxs.slack.com/archives/CA0NS79MG/p1591349955252500

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ngxs-error-repro?file=src%2Fapp%2Fapp.component.ts You can toggle lines 13 & 16 to view when it happens or not.

Thanks for this great library and for the time you take to code & maintain it!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
arturovtcommented, Jun 21, 2022

Since newer Angular versions emit ES2015 and not ES5 (where classes are downgraded to functions which are hoisted and might be used immediately), error messages become more meaningful. Classes are also hoisted, but might be used only after the code evaluation.

Testing it with Angular 11 and it throws Cannot access 'CurrentUserState' before initialization because this is how it looks like after the compilation:

class AppComponent {}

class CurrentUserSelectors {}

__decorate([Selector([CurrentUserState]), CurrentUserSelectors, "ips", null);

class CurrentUserState {}

It throws Cannot read property 'NGXS_SELECTOR_META' of undefined because ES5 variable is hoisted and equals undefined if accessed before the initialization:

var CurrentUserSelectors = function() {};

__decorate([Selector([/* undefined here */ CurrentUserState]), CurrentUserSelectors, "ips", null);

var CurrentUserState = function() {};

The createSelector approach works since it only captures the CurrentUserState reference, but doesn’t access it immediately as opposed to @Selector() decorator.

I’m closing it as not an issue for now, since I don’t see any issue in our codebase which likely might be solved.

1reaction
stgrosshhcommented, Jun 9, 2021

@stgrosshh would it be possible to provide more information or a repro?

I will try to set up a small example showing the problem in a repo

Read more comments on GitHub >

github_iconTop Results From Across the Web

Failed to initialize client contex… | Apple Developer Forums
Some of Apple's APIs failed and together with failing there is this error printed to the console. In my opinion this is some...
Read more >
Undefined $url warning since switch to PHP 8.1 - WordPress.org
Regarding your plugin we had the following error: Undefined variable $url in /src/app/plugins/better-wp-security/lib/icon-fonts/init.php on line 35.
Read more >
Error after Angular update from v9 to v10. Property ...
The error is clear, properties of searchParameters are attempted to be used before it's initialized. One solution is to initialize it with ...
Read more >
Bug listing with status RESOLVED with resolution FIXED as at ...
Bug :2 - "How do I attach an ebuild. ... Bug:221 - "--world update error with order of packages" status:RESOLVED resolution:FIXED severity:minor ·...
Read more >
Known issues with Android Studio and Android Gradle Plugin
Apps using the Database Inspector may crash when running on the Android 11 emulator, with an error like the following appearing in logcat:....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found