Error “RangeError: Maximum call stack size exceeded” when using a custom RxJS operator in NgRx

Question

I’m working on an Angular application and I’m using RxJS to handle some effects. I’ve created a custom operator called isPollAction that is supposed to filter actions of a specific type (SharedActions.poll) and return only those that match a given pollId. Here’s the code for my operator:

/**
 * Filters actions of type SharedActions.poll and returns only those that match the given poll id.
 */
export const isPollAction = (
  pollId: string
): UnaryFunction<
  Observable<Action>,
  Observable<Action & { pollId: string }>
> => {
  return pipe(
    ofType(SharedActions.poll),
    filter((action) => action.pollId === pollId),
    map((action: any) => action as Action & { pollId: string })
  );
};

I’m using this operator in my effects like this:

  pollTriggered$ = createEffect(() =>
    this.actions$.pipe(
      isPollAction('myPollId'),
      mergeMap(() =>
      //...

When I run my application, I get the following error: Uncaught (in promise): RangeError: Maximum call stack size exceeded. However, if I replace my isPollAction operator with an ofType operator followed by a filter (to filter by the poll id), the error does not occur.

It began to happen after I upgraded to from ngrx v12 to v16. I have another similar operator with the same problem.

I tried simplifying the operator just in case the recursive pipe() call could be leading to the error:

export function isPollAction(
  pollId: string
): OperatorFunction<Action, Action & { pollId: string }> {
  return filter((action: Action) => {
    return (
      action.type === SharedActions.poll.type &&
      (action as Action & { pollId: string }).pollId === pollId
    );
  }) as OperatorFunction<Action, Action & { pollId: string }>;
}

But it keeps throwing the same error.

Can anyone help me understand why this error is occurring and how I can fix it? Thank you in advance!