novu
novu copied to clipboard
🐛 Bug Report: Angular ^17.0.0 - flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering
📜 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:
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