Skip to content

🐛 Bug Report: Angular ^17.0.0 - flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering #5588

@raimonlpz

Description

@raimonlpz

📜 Description

I'm trying to integrate Novu ("@novu/notification-center-angular": "^0.24.1") with my Angular (^17.0.0) project, it compiles ok, but all of a sudden I get this error logged in the console, I reproduced the error in a fresh new Angular project and it's throwing the same error. The Novu widget works perfectly, by the way.

Log:

Screenshot 2024-05-16 at 18 50 56

Screenshot 2024-05-16 at 18 51 10

As I'm using the standalone component system approach, I'm importing Novu dependencies in the component itself:

// app.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NotificationCenterModule } from '@novu/notification-center-angular';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [CommonModule, RouterOutlet, NotificationCenterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'novu17';

  subscriberId = environment.subscriberId;
  applicationIdentifier = environment.applicationIdentifier;

  styles = {
    bellButton: {
      root: {
        svg: {
          color: 'white',
          width: '45px',
          height: '40px',
          fill: 'white',
        },
      },
      dot: {
        rect: {
          fill: 'rgb(221, 0, 49)',
          strokeWidth: '0.2',
          stroke: 'white',
          width: '3.5px',
          height: '3.5px',
        },
        left: '40%',
      },
    },
    header: {
      root: {
        backgroundColor: '',
        '&:hover': { backgroundColor: '' },
        '.some_class': { color: '' },
      },
    },
    layout: {
      root: {
        backgroundColor: '',
      },
    },
    popover: {
      arrow: {
        backgroundColor: '',
        border: '',
      },
    },
  };

  sessionLoaded = (data: unknown) => {
    console.log('loaded', { data });
  };
}```

// HTML:
width="40"
alt="Angular Logo"
src=""

/>
Welcome

  [subscriberId]="subscriberId"
  [applicationIdentifier]="applicationIdentifier"
  [sessionLoaded]="sessionLoaded"
  [styles]="styles"
>


aria-label="Angular on twitter"
target="_blank"
rel="noopener"
href="https://twitter.com/angular"
title="Twitter"
  id="twitter-logo"
  height="24"
  data-name="Logo"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 400 400"
>
  
  



aria-label="Angular on YouTube"
target="_blank"
rel="noopener"
href="https://youtube.com/angular"
title="YouTube"
  id="youtube-logo"
  height="24"
  width="24"
  data-name="Logo"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="#fff"
>

`

// package.json:

{ "name": "novu17", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^17.0.0", "@angular/common": "^17.0.0", "@angular/compiler": "^17.0.0", "@angular/core": "^17.0.0", "@angular/forms": "^17.0.0", "@angular/platform-browser": "^17.0.0", "@angular/platform-browser-dynamic": "^17.0.0", "@angular/router": "^17.0.0", "@novu/notification-center-angular": "^0.24.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.2" }, "devDependencies": { "@angular-devkit/build-angular": "^17.0.0", "@angular/cli": "^17.0.0", "@angular/compiler-cli": "^17.0.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.2.2" } }

// tsconfig.json:

`/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}




This does not look such a big deal, but certainly, the app routing stopped working when integrating Novu. The URL changes parameters/slug when some routed button/anchor tag is triggered, but the page don't render new views. It might be related with the error logged. 

I've also installed @types/react as suggested by the Docs (btw some lib types are not synhcronized with last versions of this package, so had to downgrade @types/react), it made no difference.

### 👟 Reproduction steps

1. Just follow same steps from https://docs.novu.co/quickstarts/angular
2. Make sure to use last version of Angular (v.17)

### 👍 Expected behavior

Just not throwing this React related error and allowing the app to work as expected (standard routing between components on click routed elements -currently blocked-).

### 👎 Actual Behavior with Screenshots

Logged error:
<img width="1319" alt="Screenshot 2024-05-16 at 18 50 56" src="https://github.com/novuhq/angular-quickstart/assets/59086203/13a41278-ed91-4ae2-bd69-0f4920d878fa">
<img width="661" alt="Screenshot 2024-05-16 at 18 51 10" src="https://github.com/novuhq/angular-quickstart/assets/59086203/2b20ade4-1fae-4d63-9931-ed1dc32046d8">

And app internal routing completely blocked.

### Novu version

^0.22.0

### npm version

10.1.0

### node version

20.9.0

### 📃 Provide any additional context for the Bug.

_No response_

### 👀 Have you spent some time to check if this bug has been raised before?

- [X] I checked and didn't find a similar issue

### 🏢 Have you read the Contributing Guidelines?

- [X] I have read the [Contributing Guidelines](https://github.com/novuhq/novu/blob/main/CONTRIBUTING.md)

### Are you willing to submit PR?

None

Metadata

Metadata

Assignees

No one assigned

    Labels

    InboxbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions