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?

Edmund Lee · Accepted Answer · 2017-01-22 22:44:34Z

11

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.

edited Jan 22, 2017 at 22:44

answered Jan 21, 2017 at 4:58

Edmund Lee

2,59424 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OctaviaLo Over a year ago

Great answer to a broad problem. This help me find my syntax error in the background page which was due to incorrect config of my .babelrc file.

dfranca · Accepted Answer · 2016-12-29 16:39:26Z

9

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.

answered Dec 29, 2016 at 16:39

dfranca

5,3622 gold badges36 silver badges66 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related