🐞[BUG]: Devtools plugin seems to not work with redux devtools chrome extension

[shadow1349]

Affected Package

The issue is caused by package @ngxs/devtools-plugin

Is this a regression?

This started to happen when I upgraded to version 18.

Description

There seems to be an issue where the NGXS Devtools plugin seems to not want to work with the redux devtools chrome extension.

🔬 Minimal Reproduction

Here is a repo with minimal reproduction:
https://github.com/shadow1349/replicate-material-color-error/tree/redux-devtools-not-working/test-app/src/app

Run npm install (in the root of the project, it's an NX monorepo) and the run npx nx run test-app:serve --configuration=development

If you try to open the redux devtools it will say "No store found". However, if you open up the chrome devtools and look at Application -> session storage you can see that state does in fact work it just doesn't sync up with the redux devtools.

Environment

Libs:
@angular-devkit/architect       0.1802.3
@angular-devkit/build-angular   18.2.3
@angular-devkit/core            18.2.3
@angular-devkit/schematics      18.2.3
@schematics/angular             18.2.3
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

"@ngxs/devtools-plugin": "^18.1.1",
"@ngxs/storage-plugin": "^18.1.1",
"@ngxs/store": "^18.1.1",

Browser:
Chrome (desktop) Version 128.0.6613.120 (Official Build) (arm64)
 
For Tooling issues:
- Node version: 20.11.1
- Platform:  Mac Silicon M3

[dowebdevelopment]

Yes, same issue here!

[markwhitfeld]

Thank you for reporting the issue. There are currently a few much higher priorities that the team is working on, so it is not going to receive attention right now.
@shadow1349, or @dowebdevelopment, do you think you would like to have a go at investigating this issue?

The devtools plugin is pretty straightforward, so hopefully it is quite approachable to be able to debug. The plugin picks up its reference to the dev tools here:

store/packages/devtools-plugin/src/devtools.plugin.ts

Lines 37 to 38 in bd43d33

	private readonly globalDevtools =
	ɵglobal['__REDUX_DEVTOOLS_EXTENSION__'] || ɵglobal['devToolsExtension'];

Maybe that is a good place to start.

[MrTob]

i have the same issue. Using a nx-monorepo with Angular 18

[shadow1349]

Looks like it may be something with the extension? reduxjs/redux-devtools#1731

[maximLyakhov]

Temporary workarounds: use Logger plugin or open Redux tab in devtools and reload.