The dev tool does not work

[Asscobara]

The error I get from the dev tools on the extension window:

window.bundle.js:2 TypeError: Cannot read properties of undefined (reading 'action') at o.value (window.bundle.js:2:1651470) at o.value (window.bundle.js:2:1650604) at ds (window.bundle.js:2:153189) at Pu (window.bundle.js:2:169890) at t.unstable_runWithPriority (window.bundle.js:2:1032894) at $o (window.bundle.js:2:112201) at Cu (window.bundle.js:2:166629) at mu (window.bundle.js:2:162828) at window.bundle.js:2:112424 at t.unstable_runWithPriority (window.bundle.js:2:1032894) as @ window.bundle.js:2 window.bundle.js:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'action') at o.value (window.bundle.js:2:1651470) at o.value (window.bundle.js:2:1650604) at ds (window.bundle.js:2:153189) at Pu (window.bundle.js:2:169890) at t.unstable_runWithPriority (window.bundle.js:2:1032894) at $o (window.bundle.js:2:112201) at Cu (window.bundle.js:2:166629) at mu (window.bundle.js:2:162828) at window.bundle.js:2:112424 at t.unstable_runWithPriority (window.bundle.js:2:1032894)

Any idea what's wrong?

[mrtnjln]

Hello,

Same error for me (Chrome version 103.0.5060.134 - Redux DevTools 3.0.11).

Thanks in advance, Julien

[HouCoder]

I had to reinstall the extension to make it work.

[komali2]

I'm having this error now. It will take time for me to produce a working, shareable example, as our app is massive (and, sadly, proprietary). In doing so, perhaps I will simply discover the issue? So I will post what I can here for now, and hope to expedite the finding of that solution.

        "react": "^17.0.2",
        "redux": "^4.1.2",

Redux devtools version: Version 3.0.11

Chrome version Version 103.0.5060.114 (Official Build) (64-bit)

Distributor ID:	Ubuntu
Description:	Ubuntu 20.04.4 LTS
Release:	20.04
Codename:	focal

When I open redux devtools, I see a blank page. If I inspect the frame, I get uncaught errors in the console for redux devtools:

Uncaught Error: No location name for view with id chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljdRedux
    at Ii.locationNameForViewId (legacy.js:1:118242)
    at Vi.onContextMenu (legacy.js:1:138953)
    at ri.tabContextMenu (legacy.js:1:113430)

TypeError: Cannot read properties of undefined (reading 'action')
    at o.value (window.bundle.js:2:1651470)
    at o.value (window.bundle.js:2:1650604)
    at ds (window.bundle.js:2:153189)
    at Pu (window.bundle.js:2:169890)
    at t.unstable_runWithPriority (window.bundle.js:2:1032894)
    at $o (window.bundle.js:2:112201)
    at Cu (window.bundle.js:2:166629)
    at mu (window.bundle.js:2:162828)
    at window.bundle.js:2:112424
    at t.unstable_runWithPriority (window.bundle.js:2:1032894)
as @ window.bundle.js:2
window.bundle.js:2 

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'action')
    at o.value (window.bundle.js:2:1651470)
    at o.value (window.bundle.js:2:1650604)
    at ds (window.bundle.js:2:153189)
    at Pu (window.bundle.js:2:169890)
    at t.unstable_runWithPriority (window.bundle.js:2:1032894)
    at $o (window.bundle.js:2:112201)
    at Cu (window.bundle.js:2:166629)
    at mu (window.bundle.js:2:162828)
    at window.bundle.js:2:112424
    at t.unstable_runWithPriority (window.bundle.js:2:1032894)

It looks like this:

Our app chrome frame:

Redux devtools chrome frame:

I have tried:

1. Restarting my computer
2. Restarting chrome
3. Uninstalling redux devtools, then doing step 1 and 2 in variations between reinstalls

The issue persists.

My store is built as such:

import { configureStore } from '@reduxjs/toolkit';
import {
  useDispatch as useAppDispatch,
  useSelector as useAppSelector,
  TypedUseSelectorHook,
} from 'react-redux';

import { persistStore } from 'redux-persist';

import rootReducer from './reducer';


const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }),
  devTools: true,
});

const persister = persistStore(store);

export type RootState = ReturnType<typeof rootReducer>;

export type AppDispatch = typeof store.dispatch;

const { dispatch } = store;

const useDispatch = () => useAppDispatch<AppDispatch>();
const useSelector: TypedUseSelectorHook<RootState> = useAppSelector;

export { store, persister, dispatch, useSelector, useDispatch };

[chipallen2]

Any advice on how to get around this error. I tried reinstalling the extension in chrome but the error still persists?

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'action')
    at o.value (window.bundle.js:formatted:89391:51)
    at o.value (window.bundle.js:formatted:89342:26)
    at ds (window.bundle.js:formatted:8421:52)
    at Pu (window.bundle.js:formatted:9541:47)
    at t.unstable_runWithPriority (window.bundle.js:formatted:57353:28)
    at $o (window.bundle.js:formatted:5954:17)
    at Cu (window.bundle.js:formatted:9330:24)
    at mu (window.bundle.js:formatted:9056:17)
    at window.bundle.js:formatted:5978:41
    at t.unstable_runWithPriority (window.bundle.js:formatted:57353:28)

Which seems to be this line of code in the file from stacktrace

this.setState({
      stackFrames: [],
      showDocsLink: !!o.action && !!o.action.type && "@@INIT" !== o.action.type
  })

[komali2]

I have reinstalled redux dev tools one final time, and now it works? 3.0.11 is still the same version lol, maybe a chrome update fixed it?

[Bartel-C8]

In my case I got this stack trace, using Electron (tried with both v19 (Chromium 102.0.5005.167) and v21 (Chromium 106.0.5249.91) wit extension version 3.0.11 :

  [36886:1012/133754.961339:ERROR:CONSOLE(0)] "Error in event handler: TypeError: Cannot read properties of undefined (reading 'action')
      at o.value (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:1746278)
      at Ha (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:139049)
      at Va (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:138848)
      at Hs (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:179461)
      at Eu (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:165737)
      at Ou (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:165665)
      at Su (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:165528)
      at mu (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:162603)
      at chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:112424
      at t.unstable_runWithPriority (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.bundle.js:2:1032894)", source: chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.html (0)

Which maps to this line: https://github.com/reduxjs/redux-devtools/blob/main/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx#L333

Is it to be avoided to just wrap an if-guard around this?

[Bartel-C8]

This is really annoying. Can't really get around it. Is there a possible fix?

Maybe it's fixed already, but there hasn't been a new version pushed to the Chrome Web Store since 3.0.11

[Methuselah96]

Is it possible that you're dispatching an undefined action?

[Bartel-C8]

Could be, but not intentional at least. How could I find this out? (Typescript project, so I suspect typescript should complain anyway when dispatching an undefined action?)

But, I do have multiple filters/sanitizers in place for Redux (in order to get better Redux Devtools performance) of @reduxjs/toolkit: I am using: actionsDenylist, actionSanitizer, stateSanitizer and predicate.

Strange thing is that I have this system in place for quite some time, and only recently noticing these "crashes".

[Bartel-C8]

But shouldn't this line https://github.com/reduxjs/redux-devtools/blob/main/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx#L333 just not get an extra check that if actionsById[actionId] is undefined that actionType = '<UNDEFINED>' ?

[Methuselah96]

Maybe, or maybe it indicates there's a bug somewhere else. I believe the intention is that the action should never be undefined since there should always be at least one action in a store (i.e., the INIT action), so it seems likely that currentStateIndex is pointing to an invalid index. Whatever is causing that should be fixed.

[Methuselah96]

Can you try deleting the IndexedDB for the devtools and see if that changes anything?

Can you give more details about when it crashes? Does it happen as soon as you open the devtools, or does it work initially and then crash?

[Bartel-C8]

I traced it back to 1 specific dispatch. If I comment that one out. It does not crash anymore. So it indeed works initially and after a while (when that specific dispatch happens), it crashes.

It is definitely no undefined dispatch. And that dispatch is also used some times before, when no error happens. The weird thing is, that the times before it's dispatched, it does not show up in the actions list (although it's not filtered)...

I'll trace it further!

[Bartel-C8]

Commenting out actionsDenylist (was named actionsBlacklist before) did the trick for me. I already was using predicate as well to filter out actions. Adding all entries of actionsDenylist to predicate resolves the bug. So maybe it was something strange when using the combination together?

But what I think could be happening(?): I have set a latency of 2000ms. And I am dispatching fairly many actions. One of them was being blacklisted in actionsDenylist. Could it be that the dispatching of some other (frequent) action, renders that the blacklisted action gives that undefined actionId, somewhere in a old list?

[genesiscz]

Can you try deleting the IndexedDB for the devtools and see if that changes anything?

Can you give more details about when it crashes? Does it happen as soon as you open the devtools, or does it work initially and then crash?

Saved my day! I had to delete the whole App store via "Clear site data" but it DID work!

[SlamTheDragon]

I may be experiencing the same issue, the only difference is that the devtools occasionally "fix itself"(?) Other than that the issue gets progressively worse up to the point that the panel won't show itself.

I have the v3.0.19 installed, I've tried some solutions listed here but it seems to not work

Stack Trace

window.bundle.js:2 (ds)
window.bundle.js:2 (r.callback)
window.bundle.js:2 (zi)
window.bundle.js:2 (xl)
window.bundle.js:2 (wl)
window.bundle.js:2 (bl)
window.bundle.js:2 (anonymous function)
window.bundle.js:2 (Su)
window.bundle.js:2 (uu)
window.bundle.js:2 (Uo)
window.bundle.js:2 (anonymous function)
window.bundle.js:2 (Su)
window.bundle.js:2 (iu)
window.bundle.js:2 (S)
window.bundle.js:2 (T)

Source:
           /*! For license information please see window.bundle.js.LICENSE.txt */
--->       (()=>{var e,t,r={30642:function(e,t,r){var n,o,i=this&&this.__generator||function(e,t){va...
           display: flex;
           height: 100%;
           width: 100%;
           flex-flow: column nowrap;
           overflow: auto;
           ${""}
           backgroun...

EDIT

• I reinstalled and cleared several caches in both vscode and chrome and restarted my system and the devtools is operating as it should.