TypeError: Cannot read property 'error' of undefined on React Chrome Extension

Question

I'm developing a React Chrome Extension using the React-Chrome-Redux library

It's the first time I develop using this and I stuck in an error that I can't figure out the reason.

My popup app is failing on runtime with the following error message on the console:

Error in event handler for (unknown): TypeError: Cannot read property 'error' of undefined

I tried to debug and set a breakpoint in the exact location of the error:

return new Promise(function (resolve, reject) {
    chrome.runtime.sendMessage({
      type: _constants.DISPATCH_TYPE,
      payload: data
    }, function (_ref2) {
      var error = _ref2.error;
      var value = _ref2.value;

      if (error) {
        reject((0, _assignIn2.default)(new Error(), error));
      } else {
        resolve(value.payload);
      }
    });
  });
}

on the Promise callback the _ref2 is undefined when the action is: type: "chromex.dispatch" and the payload is also undefined.

This started happening after introduce a dispatch method to start the authentication process, the code is as follow:

class App extends Component {

  constructor(props) {
    super(props);

    this.props.dispatch({
      type: START_AUTH
    });
  }

On both popup/index.js and background/index.js I set the store communication channel:

//popup
import {Store} from 'react-chrome-redux';
import {Provider} from 'react-redux';


const proxyStore = new Store({
  portName: 'my_app'
});

//background
import rootReducer from '../core/reducers';

import {wrapStore} from 'react-chrome-redux';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from 'react-chrome-redux';

import App from './components/App';

const store = createStore(rootReducer, {});

wrapStore(store, {
  portName: 'my_app'
});

I've plenty of logging messages on the authentication process, but nothing seems to happen.

In core/ I have the common files, like reducers, action types, actions, etc, it's always translated from ES6 by webpack-babel.

Unfortunately it seems that React dev tools doesn't work on Chrome extensions to help debugging.

Any idea or any more information you need to help me to figure out what's happening and how to fix it?

Answer 1

This is for anyone who stumbles upon here in search for an answer. What @danielfranca posted is just symptom.

What actually happened is, there is an error thrown (in the background page) after the action is dispatched, so the action failed to finish. Refer to wrapStore.js or below (in case there is changes in their github).

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === DISPATCH_TYPE) {
    const action = Object.assign({}, request.payload, {
      _sender: sender
    });

    dispatchResponder(store.dispatch(action), sendResponse);
    return true;
  }
});

This line below, store.dispatch(action) returns a result. But if an error occurred during that (in the reducer), then you don't get the result.

dispatchResponder(store.dispatch(action), sendResponse);

So it sends back nothing (undefined) (refer to here). And in the Store.js, the dispatch function try to retrieve error key from undefined, which caused the error.

Because you are inspecting the popup/content page, you get this very vague error message. If you inspect your background page, you will see the actual error.

I created a PR for displaying a more helpful error message. Hopefully it'll get merged.

Answer 2

The solution was much simpler than I expect.

The action names were not being exported, so the type being dispatched was actually undefined

Changing from:

const START_AUTH = "START_AUTH";

to:

export const START_AUTH = "START_AUTH";

Solved the problem.