🐞[BUG]: Decorators are broken when using useDefineForClassFields

[mwaqar666]

Affected Package

The issue is caused by package @ngxs/store

Description

As mentioned in the docs here, I have created a memoized selector like so:

export const RouteDataStateToken = new StateToken<RouteData>("routeDataState");

@State({
	name: RouteDataStateToken,
	defaults: DefaultRouteData,
})
@Injectable()
export class RouteDataState {
	@Selector()
	public static getRouteData(state: RouteData) {
		return state;
	}

	@Action(SetRouteDataAction)
	public setRouteData(context: StateContext<RouteData>, payload: SetRouteDataAction) {
		context.setState(payload.data);
	}
}

I have tried to debug as far as I could, it seems like the __decorate function created by typescript at compile time is receiving the following arguments at runtime for Selector decorator which looks very suspicious:

export function __decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
}

decorators: [Selector, undefined, undefined, undefined] // <= This undefined looks suspicious
target: class RouterDataState
key: getRouteData
desc: undefined // <= This is undefined (which I guess shouldn't be)

🔬 Minimal Reproduction

I tried to create a minimal reproduction example, but unable to reproduce the issue, seems like something's wrong with my project only. I have google the error, but seems there ain't one person who has faced this issue. So, I am leaving a link to my repo and steps to set it up

1. Clone repo: https://github.com/mwaqar666/sca
2. Checkout branch unstable-state/frontend-integration
3. run npm i
4. Run npx nx run sca-fe:serve:dev

🔥 Exception or Error

Uncaught Error: Selectors only work on methods.
    at throwSelectorDecoratorError (ngxs-store.js:52:11)
    at ngxs-store.js:4104:17
    at __decorate (tslib.es6.js:58:54)
    at 3938 (route-data.state.ts:15:16)
    at __webpack_require__ (bootstrap:19:1)
    at 14 (route-data.model.ts:11:2)
    at __webpack_require__ (bootstrap:19:1)
    at 5954 (route-data.action.ts:4:64)
    at __webpack_require__ (bootstrap:19:1)
    at 864 (route-data-bus.service.ts:8:33)

Environment

Libs:
- @angular/core version: 15.0.0
- @ngxs/store version: 3.7.6

Browser:
- [ x ] Chrome (desktop) version XX
- [   ] Chrome (Android) version XX
- [   ] Chrome (iOS) version XX
- [ x ] Firefox version XX
- [   ] Safari (desktop) version XX
- [   ] Safari (iOS) version XX
- [   ] IE version XX
- [ x ] Edge version XX
 
For Tooling issues:
- Node version: 18.12.1
- Platform: Linux

[arturovt]

I can't run it:

[mwaqar666]

@arturovt Sorry, my bad, I renamed the command sometime ago and didn't remember it. Anyways here's the updated one

npx nx run sca-fe:serve:dev

I have updated in the details above too

[arturovt]

Hey, I was able to reproduce it and I'm still debugging it.

I initially thought that might be an issue in some circular dependency between modules. But then I just created my own method decorator and used on the AppComponent static method which also didn't emit an argument for descriptor.

This might seem like a breaking change between TS versions, I'm not sure yet. Need more time.

UPD: I've created a skeleton project that uses the same TS/tslib versions and descriptor is provided there. This seems it's related to your project specificly or your configuration.

[mwaqar666]

Thanks for the update! The Typescript version is same across the entire application. Method decorators are used across the entire application at multiple places but they all are working fine. I'm wondering what'll be the cause of this error.

So if it's not the bug from the NGXS, should I open it on the Typescript GitHub issues?

[arturovt]

I don't think this is the in NGXS. Eventually, all of the NGXS users would face this issue, but none of them did.

[mwaqar666]

What should I do? :') I've updated the dependencies but still the same result. Anyways, thanks for the help :)

[arturovt]

I will come back to your issue again a bit later. Users are facing decorators issues in other libraries as well, which means it's really something related to changes made in Angular. See this one ngneat/until-destroy#218 (comment).

[arturovt]

P.S. when I set "useDefineForClassFields": false (in compilerOptions, not angularCompilerOptions) in sca-fe/tsconfig.json the app is working.

[arturovt]

I'd re-open this issue and discuss it with Mark.

[RobertFlavia]

Any news on that? We also have the same problem. Using the @Select decorator always leaves the decorated observable uninitialized (undefined). The setting in the compiler options also fix it for us. Calling store.select on the other hand works fine even without the setting. We searched a whole day to find this github issue and the fix. Maybe this issue should be mentioned somewhere as all the basic examples with @Select are currently not working.

We use "15.2.*" for the angular packages, tslib 2.3.0, typescript 4.8.2 and @ngxs/store 3.7.6-dev.master-6835a28. The latter is necessary for the removed "eivyEnabled" export in Angular 15 btw.

For what date is the 3.8.0 release planned?

[markwhitfeld]

Great news! v3.8.0 has been released and it includes a fix for this issue.
We are closing this issue, but please re-open it if the issue is not resolved.
Please leave a comment in the v3.8.0 release discussion if you come across any regressions with respect to your issue.

[alsha]

Hi *,

can someone confirm, that the issue is fixed?
@select does not work for me in both @ngxs/store versions 3.8.0 and 3.8.1, if i use useDefineForClassFields=true.
With useDefineForClassFields=false everything works fine.
I am using Angular 15

[arimus]

Hi *,

can someone confirm, that the issue is fixed? @select does not work for me in both @ngxs/store versions 3.8.0 and 3.8.1, if i use useDefineForClassFields=true. With useDefineForClassFields=false everything works fine. I am using Angular 15

Pretty sure that it is not. I am also using 3.8.1 and ran into this issue. Setting useDefineForClassFields=false, everything works. I am using the following:

NGXS 3.8.1
Angular 16.0.3
Nodejs v18.10.0
TypeScript 4.9.5
tslib 2.5.2

[pfei5]

This is not fixed. Decorators do not work when tsconfig.json > compilerOptions > target is set to ES2022 and tsconfig.json > compilerOptions > useDefineForClassFields is set to true.
Tested with @ngxs/[email protected]