Uncaught TypeError: Cannot read property 'action' of undefined

[glenjamin]

This happened when toggling actions and on and off.

The full stack trace.

VM3847:418
Uncaught TypeError: Cannot read property 'action' of undefined
i @ VM3847:418
(anonymous function) @ VM3847:465
dispatch @ createStore.js:179
r @ VM3847:44

It's hard to tell exactly what happened here because of the minification, this is the relevant section of the minified code:

      var s = u[f],
          p = i[s].action,
          l = c[f - 1],
          d = l ? l.state : r,
          v = l ? l.error : void 0,
          y = a.indexOf(s) > -1,
          h = y ? l : o(n, p, d, v);c.push(h);

What's the best way to debug this further?

[glenjamin]

After a bunch of poking around I've established that the error is from this function: https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js#L106-142

[zalmoxisus]

@glenjamin, thanks for the report. It seems related to #109.

Unfortunately, the stack trace doesn't help, we still don't know why actionsById is empty here.

Does the action toggling work even with the exception? Does this happen all the time (if you refresh the page)?

To get more detailed information you should clone the branch and run the extension from there in the development mode.

[glenjamin]

Everything seems to still function correctly, the first time it was happening a lot (multiple errors per click) - after a refresh it was only one at a time.

Might be something to do with whether I'd hit reset?

[zalmoxisus]

There's something wrong in the injected script for sure as it shouldn't dispatch the action several times. So, somehow the event listener was applied multiple times, and liftedStore object is not what we want to be (probably is not changed from the initial state).

Need to investigate more. Any other details would be welcome.

[zalmoxisus]

Well, I managed to reproduce that.

For some reason the store in your app is re-created multiple times, and as the result window.devToolsExtension is called several times. So, the event listener is applied here multiple times and the listener get old values.

I solved that by replacing window.addEventListener('message', onMessage, false); in L125 with:

if (window.devToolsExtension.__listener) {
      window.removeEventListener('message', window.devToolsExtension.__listener);
}
window.addEventListener('message', onMessage, false);
window.devToolsExtension.__listener = onMessage;

Will investigate a bit before publishing, maybe there's a better solution.

Could you check if that solves the issue?

[glenjamin]

Aha, I understand the issue now.

This is how my store is set up:

let store = redux.createStore(
  reducer,
  redux.compose(
    redux.applyMiddleware(reduxPromise, reduxThunk),
    // If the dev tools extension is installed in the browser
    // then activate it.
    window.devToolsExtension ? window.devToolsExtension() : (f) => f
  )
);

if (module.hot) {
  module.hot.accept();
  module.hot.dispose((data) => {
    data.store = store;
  });
  if (typeof module.hot.data === "object") {
    if (module.hot.data.store) {
      store = module.hot.data.store;
      store.replaceReducer(reducer);
    }
  }
}

To keep the logic flatter, the store is rebuilt every time, but if a store already exists in the hot loaded data the new one never gets used.

I think this means your fix won't help me, because it's the old store which actually does the work - I'll update my logic to not create loads of unused stores.

[zalmoxisus]

I think the solution I provided above should help, because it removes the old listener and listen for the new store applied (data.store). If the new one is the same as before, then there shouldn't be any problems. Could you please check it and confirm?

[glenjamin]

But I actually throw away the new store, and keep using the old one.

I've changed my code to only create a store if one wasn't found in the hot reload data now.

[zalmoxisus]

@glenjamin, strange I've just checked your snippet, and don't see any problems with it. Anyway, I've just published 1.2.1, where the listener will not be applied anymore. Let me know if you still experience any troubles.

[zalmoxisus]

Closing as it wouldn't throw anymore and doesn't seems to be something more to implement here. If you have any ideas what we can do to support such cases better, please let me know.

[PaulleDemon]

@zalmoxisus I am still experiencing this error. Can you look into what's going on?

I am not sure if this would be of any help, but the error occurs somewhere here

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

[itorras13]

This is also happening to me suddenly and is throwing in the same spot as @PaulleDemon

[PaulleDemon]

I had to remove the extension and reinstall it to make it work. I was working on two different projects on the same port, maybe that's why?