search

ngxs / store

🚀 NGXS - State Management for Angular
http://ngxs.io
MIT License
3.54k stars 403 forks source link

🐞[BUG]: Uncaught TypeError: Cannot redefine property: ɵfac #1855

Closed xutzin closed 2 years ago

xutzin commented 2 years ago

Affected Package

@ngxs/store

Is this a regression?

Yes, the previous version in which this bug was not present was: 3.7.3

Description

  1. Either removing the inheritance extends ShaBaseDialog or commenting out @Select(...) account$ can make the errors go away
  2. Switching back to 3.7.3 can fix the issue, too

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-vgtlgq

$ ng test @shared/error

🔥 Exception or Error


10 06 2022 15:20:31.975:INFO [launcher]: Starting browser Chrome
10 06 2022 15:20:33.966:INFO [Chrome 102.0.5005.115 (Windows 10)]: Connected on socket X59I98ybWDev5CwuAAAB with id 96706161        
Chrome 102.0.5005.115 (Windows 10) ERROR
  An error was thrown in afterAll
  Uncaught TypeError: Cannot redefine property: ɵfac
  TypeError: Cannot redefine property: ɵfac
      at Function.defineProperty ()
      at addDirectiveFactoryDef (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:25268:12)
      at compileComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:25015:5)     
      at typeFn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:25481:158)
      at TypeDecorator (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:3842:21)        
      at __decorate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/tslib/tslib.es6.js:58:54)
      at Object.784 (http://localhost:9876/_karma_webpack_/webpack:/projects/shared/error/src/lib/dialog/main/main.dialog.ts:13:30) 
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Object.7262 (http://localhost:9876/_karma_webpack_/main.js:43:70)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
Chrome 102.0.5005.115 (Windows 10): Executed 0 of 0 ERROR (0 secs / 0 secs)
Chrome 102.0.5005.115 (Windows 10) ERROR
  An error was thrown in afterAll
  Uncaught TypeError: Cannot redefine property: ɵfac
  TypeError: Cannot redefine property: ɵfac
      at Function.defineProperty ()
      at addDirectiveFactoryDef (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:25268:12)
      at compileComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:25015:5)     
      at typeFn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:25481:158)
      at TypeDecorator (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:3842:21)        
      at __decorate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/tslib/tslib.es6.js:58:54)
      at Object.784 (http://localhost:9876/_karma_webpack_/webpack:/projects/shared/error/src/lib/dialog/main/main.dialog.ts:13:30) 
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Object.7262 (http://localhost:9876/_karma_webpack_/main.js:43:70)
Chrome 102.0.5005.115 (Windows 10): Executed 0 of 0 ERROR (0.026 secs / 0 secs)

Environment


Libs:
- @angular/core version: 14.0.1
- @ngxs/store version: 3.7.4

Browser:
- [x ] Chrome (desktop) version 102.0.5005.115 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: v16.15.1 (LTS)
- Platform: Windows 

Others:
-
MichaelAlt commented 2 years ago

Got the same issue. Only happens during testing. Works fine in build and development. When i use the store everything works. If i use the @Select annotation than it fails.

xutzin commented 2 years ago

I'm not sure if it's the same issue, but in my case there's another issue encountered during runtime.

Uncaught TypeError: Cannot set property ɵfac of function OrxUserNgXsState(<omitted>... } which has only a getter
    at 80341 (user.ngxs.state.ts:23:2)
    at __webpack_require__ (bootstrap:19:1)
    at 73844 (inventory.ngxs.actions.ts:12:2)
    at __webpack_require__ (bootstrap:19:1)
    at 79878 (main.js:16:93)
    at __webpack_require__ (bootstrap:19:1)
    at 26746 (app.component.html:3:15)
    at __webpack_require__ (bootstrap:19:1)
    at 28940 (environment.ts:17:71)
    at __webpack_require__ (bootstrap:19:1)

I added another application main-app in https://stackblitz.com/edit/angular-ivy-vgtlgq as an example for the issue above

markwhitfeld commented 2 years ago

Thank you for the thorough bug report! @arturovt is having a look into it. If anyone is experiencing this issue as well, then please mention your Angular version just in case that is relevant.

mart-dominguez commented 2 years ago

I am having the same issue Libs:

andrioid commented 2 years ago

Same here, Angular 13 and ngnx/store 3.7.4. Forcing version to 3.7.3 made tests runable again.

XardasLord commented 2 years ago

I have the following issue with 3.7.4 but 3.7.3 of @ngxs/store as well. Angular v14.0.1

Error: node_modules/@ngxs-labs/actions-executing/lib/actions-executing.module.d.ts:7:97 - error TS2339: Property 'ɵbc' does not exist on type 'typeof import("C:/localRepositories/NHIA/Eclaims 2.0/eclaims.vetting.client/eclaims-vetting/node_modules/@ngxs/store/ngxs-store")'.

7     static ɵmod: ɵngcc0.ɵɵNgModuleDeclaration<NgxsActionsExecutingModule, never, [typeof ɵngcc1.ɵbc], never>;
eduard9x commented 2 years ago

This is happening for me too, version 3.7.4. after upgrading dependencies for angular 12. As it has been already mentioned, forcing 3.7.3 works fine again.

arturovt commented 2 years ago

@xutzin are you able to install the 3.7.4-dev.master-310a613 version and give it a try? Just update all packages as follows:

"@ngxs/store": "3.7.4-dev.master-310a613",
"@ngxs/storage-plugin": "3.7.4-dev.master-310a613",
...
xutzin commented 2 years ago

Thank you all for taking the time on this issue.

I tried version 3.7.4-dev.master-310a613 and the results are as follows:

Branch
(https://github.com/xutzin/angular-ngxs)		 NgXs Version Error encountered during test
Cannot redefine property: ɵfac		 Error encountered during runtime
Cannot set property ɵfac of ...
master 3.7.3
issue-3.7.4-cannot-set-property-fac 3.7.4 x x
issue-3.7.4-dev-cannot-set-property-fac 3.7.4-dev.master-310a613 x
arturovt commented 2 years ago

After a lengthy discussion, we decided to deprecate the Select decorator since it has impossible bugs to fix (just because Angular itself doesn't allow it). We're also planning to drop it in the future. It's complicated to maintain since we have to invest a lot of time into a single Select decorator rather than focusing on other essential issues. It's not type-safe. It has problems in server-side rendering and module federation. We tried to fix the server-side rendering issue initially, leading to a dead end.

For now, start replacing the Select decorator with store.select. You also shouldn't have any issues with 3.7.4 if you drop Select decorator usages.

mcrtricolor commented 2 years ago

After a lengthy discussion, we decided to deprecate the Select decorator since it has impossible bugs to fix (just because Angular itself doesn't allow it). We're also planning to drop it in the future. It's complicated to maintain since we have to invest a lot of time into a single Select decorator rather than focusing on other essential issues. It's not type-safe. It has problems in server-side rendering and module federation. We tried to fix the server-side rendering issue initially, leading to a dead end.

For now, start replacing the Select decorator with store.select. You also shouldn't have any issues with 3.7.4 if you drop Select decorator usages.

Hi, i'm having the same problem. Could you give me an example of how to do this switch between the Select decorator and the store.select?

I currently use it like this:

@Select(SesionState.getSesion) 
sesion$: Observable;

And then access it like this:

_this.sesion$.pipe(
takeUntil(this.unsubscribeBase))
.subscribe( sesion => {


// Do stuff

});_

Thanks!

axel-zarate commented 2 years ago

@mcrtricolor 

constructor(store: Store) {
    this.session$ = store.select(SesionState.getSesion);

    // Use `this.session$` as you would when using @Select
}

If you are not referencing the session$ property in the template or in your component code, you could directly do:

store.select(SesionState.getSesion).pipe(takeUntil(this.unsubscribeBase)).subscribe(sesion => {
    // Do stuff
});
mcrtricolor commented 2 years ago

Thanks axel! It was a big change in the app but it worked!

Thanks again for your quick response.

markwhitfeld commented 2 years ago

Great news! v3.7.5 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.7.5 release discussion if you come across any regressions with respect to your issue.

Also, a specific note regarding this issue: Our recommendation to move away from the decorator still stands but we decided to only introduce the deprecation message in v3.8 because we will be providing a cleaner alternative to the decorator that does not require injecting the store.