Type error with fetch operator and rxjs 7

[stijnvn]

A type error occurs when using the fetch operator with rxjs 7.

TS2322: Type 'Observable<unknown>' is not assignable to type 'EffectResult<Action>'.   Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'.     Type 'unknown' is not assignable to type 'Action'

import {Injectable} from "@angular/core";
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { fetch } from '@nrwl/angular';

@Injectable()
class TodoEffects {
  loadTodo$ = createEffect(() =>
    this.actions$.pipe(
      ofType('GET_TODO'),
      fetch({
        run: (action) => {
          return ({
            type: 'LOAD_TODO_SUCCESS',
          });
        },
      })
    )
  );

  constructor(private actions$: Actions) {}
}

When you downgrade to rxjs 6 the error disappears.

[leosvelperez]

Thanks for reporting this!

Unfortunately, I can't reproduce this issue in a new workspace using the fetch operator and rxjs 7.4.0. Could you please share a minimal repo where this issue can be reproduced?

[stijnvn]

Are you able to reproduce it with rxjs 7.5.6.

I do not get the type error when using rxjs 7.4.0. But I needed to install dependencies with npm i --legacy-peer-deps. Otherwise I got version conflicts with Angular packages.

[leosvelperez]

Can't reproduce it with rxjs 7.5.6 either.

[stijnvn]

Here is a minimal example where I have the type error:

https://github.com/stijnvn/fetch-type-error/blob/main/apps/app/src/app/app.effect.ts

Maybe it is related to the version of node or npm.

   Node : 16.16.0
   OS   : darwin x64
   npm  : 8.11.0
   
   nx : 14.4.2
   @nrwl/angular : 14.4.2
   @nrwl/cypress : 14.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.2
   @nrwl/eslint-plugin-nx : 14.4.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.4.2
   @nrwl/js : 14.4.2
   @nrwl/linter : 14.4.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.2
   @nrwl/web : 14.4.2
   @nrwl/workspace : 14.4.2
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:
         @ngrx/effects: 14.0.2
         @ngrx/entity: 14.0.2
         @ngrx/router-store: 14.0.2
         @ngrx/store: 14.0.2
         @ngrx/schematics: 14.0.2
         @ngrx/store-devtools: 14.0.2

[leosvelperez]

Thanks for providing this! It's indeed related to the package manager. I was not reproducing it because I was using Yarn and it seems to be a specific issue with package hoisting when using npm. I'll see what can be done to avoid the issue with npm, if using Yarn is an option for you, that would solve it in the meantime.

[stijnvn]

Thanks for looking into it.

I will postpone the upgrade to nx 14 for now.

[Frankitch]

Hi, same issue for me, any news on that one @leosvelperez ?

[Frankitch]

I also have no error with yarn when I run it locally but I cannot afford to switch my whole workflow to yarn.

[Frankitch]

I've found a solution for npm

[irowbin]

Facing the same issue with latest NX version.

  Node : 16.17.0
   OS   : win32 x64
   npm  : 8.15.0

   nx : 14.7.6
   @nrwl/angular : 14.7.6
   @nrwl/cypress : 14.7.6
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.7.6
   @nrwl/eslint-plugin-nx : 14.7.6
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 14.7.6
   @nrwl/js : 14.7.6
   @nrwl/linter : 14.7.6
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 14.6.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.7.6
   @nrwl/web : Not Found
   @nrwl/workspace : 14.7.6
   typescript : 4.7.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @ngrx/component-store: 14.0.2
         @ngrx/effects: 14.0.2
         @ngrx/entity: 14.0.2
         @ngrx/router-store: 14.0.2
         @ngrx/store: 14.0.2
         @ngrx/schematics: 14.0.2
         @ngrx/store-devtools: 14.0.2

[irowbin]

Facing the same issue with latest NX version.

  Node : 16.17.0
   OS   : win32 x64
   npm  : 8.15.0

   nx : 14.7.6
   @nrwl/angular : 14.7.6
   @nrwl/cypress : 14.7.6
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.7.6
   @nrwl/eslint-plugin-nx : 14.7.6
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 14.7.6
   @nrwl/js : 14.7.6
   @nrwl/linter : 14.7.6
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 14.6.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.7.6
   @nrwl/web : Not Found
   @nrwl/workspace : 14.7.6
   typescript : 4.7.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @ngrx/component-store: 14.0.2
         @ngrx/effects: 14.0.2
         @ngrx/entity: 14.0.2
         @ngrx/router-store: 14.0.2
         @ngrx/store: 14.0.2
         @ngrx/schematics: 14.0.2
         @ngrx/store-devtools: 14.0.2

But if I downgrade node version to 14, the error are gone. Not sure if it is related to node or rxjs or nx.

[LukasMachetanz]

I am facing the same issue updating to Nx 15 using Node 16 and npm 9. What‘s the recommended fix?

[irowbin]

I am facing the same issue updating to Nx 15 using Node 16 and npm 9. What‘s the recommended fix?

In my case, I did https://github.com/nrwl/nx/discussions/10692#discussioncomment-3507611 and the error is gone. Not sure if its a correct solution but it does helped me.

[leosvelperez]

This has been addressed on the latest versions of Nx. Please update to latest Nx to get the fix.

If you are on Angular 14 and can't afford to update to the latest version, you can do one of the following things:

• Update Nx to latest while keeping Angular your Angular version. To do so, run nx migrate latest --interactive and skip the Angular updates when prompted (more info)
• Use one of the workarounds suggested in this thread

We recommend going with the first option. Starting on Nx v15.7.0 you can use the latest and greatest features of Nx with Angular 14 and 15.

I'm closing this issue since it has been addressed and some workarounds are available in this thread (https://github.com/nrwl/nx/issues/11154#issuecomment-1231475839) for those who prefer not to update Nx.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.