ngrx / platform

Reactive State for Angular
https://ngrx.io
Other
8.04k stars 1.98k forks source link

Cypress/Webpack builds fail after updating to v13 #3263

Closed sixmo closed 2 years ago

sixmo commented 2 years ago

After updating from an NG12 app to NG13, the application is building and behaving correctly, but the Cypress tests don't work anymore. Webpack seems to have a problem finding @angular/core: Error: Webpack Compilation Error ./node_modules/@ngrx/store/fesm2015/ngrx-store.mjs Module not found: Error: Can't resolve '@angular/core' in 'C:\projects\[...]\node_modules\@ngrx\store\fesm2015' resolve '@angular/core' in 'C:\projects\[...]\node_modules\@ngrx\store\fesm2015' Parsed request is a module using description file: C:\projects\[...]\node_modules\@ngrx\store\package.json (relative path: ./fesm2015) Field 'browser' doesn't contain a valid alias configuration Looked for and couldn't find the file at the following paths: [C:\projects\[...]\node_modules\@ngrx\store\fesm2015\node_modules] [C:\projects\[...]\node_modules\@ngrx\store\node_modules] [C:\projects\[...]\node_modules\@ngrx\node_modules] [C:\projects\[...]\node_modules\node_modules] [C:\projects\worth\repos\Consular.Kairos.Frontend\src\Portals\node_modules] [C:\projects\worth\repos\Consular.Kairos.Frontend\src\node_modules] [C:\projects\worth\repos\Consular.Kairos.Frontend\node_modules] [C:\projects\worth\repos\node_modules] [C:\projects\worth\node_modules] [C:\projects\node_modules] [C:\node_modules] [C:\projects\[...]\node_modules\@angular\core] [C:\projects\[...]\node_modules\@angular\core.js] [C:\projects\[...]\node_modules\@angular\core.json] [C:\projects\[...]\node_modules\@angular\core.jsx] [C:\projects\[...]\node_modules\@angular\core.mjs] ...

Minimal reproduction of the bug/regression with instructions:

We're using feature stores and we're creating the actions, selectors and reducers with the methods createAction, createSelector and createReducer To update our project the following steps were taken: npx ng update @angular-eslint/schematics --next npx @angular/cli@13 update @angular/core@13 @angular/cli@13 npx @angular/cli@13 update @angular/material@13 ng update @ngrx/store

Expected behavior:

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

NgRX: 13.0.2 Angular: 13.1.1 Cypress: 9.1.0 (also previous versions) Node 14.17.3

timdeschryver commented 2 years ago

Do you have a reproduction of this @sixmo ?

sixmo commented 2 years ago

@timdeschryver I tried setting it up with the ngrx-seed repo, but I wasn't successful yet.

On the other hand, I'm not sure if it's a NgRX issue, looking at this issue

sixmo commented 2 years ago

Puting the solution in place, as proposed in the comments of the above issue, returns me to the imports used in NgRX:

Webpack Compilation Error
Module not found: Error: Can't resolve 'rxjs/operators' in 'C:\projects\[...]\node_modules\@angular\core\fesm2020'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Module not found: Error: Can't resolve 'rxjs/operators' in 'C:\projects\[...]\node_modules\@ngrx\store\fesm2020'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
markostanimirovic commented 2 years ago

I tried setting it up with the ngrx-seed repo, but I wasn't successful yet.

@sixmo Can you reproduce the issue without StackBlitz and push the project with reproduction on GitHub?

brandonroberts commented 2 years ago

I don't see why this would be related to NgRx as we don't control Cypress tests

myflowpl commented 2 years ago

@sixmo I have the same problem and the same error, did you found solution to it ?

EDIT: I found solution, you have to add one extra line to that config, I described it here: https://github.com/cypress-io/cypress/issues/19066#issuecomment-1008996897