TypeError: Cannot read the 'error' property from undefined in React Chrome Extension

Question

I am developing a React Chrome extension using the React-Chrome-Redux library

This is the first time I am developing this, and I am stuck in a mistake that I cannot understand the reason.

The following error message appears in a pop-up application at runtime:

Error in event handler for (unknown): TypeError: Unable to read the 'error' property from undefined

I tried to debug and set a breakpoint at 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); } }); }); } 

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

It started after the introduction of the sending method to start the authentication process, the code is as follows:

 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’s 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 have a lot of registration messages during the authentication process, but nothing happens.

In the kernel / I have common files, such as reducers, types of actions, actions, etc., it is always translated from ES6 using webpack-babel.

Unfortunately, it seems that React dev tools do not work with Chrome extensions to help debug.

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

Answer 1

The solution was much simpler than I expected.

Action names were not exported, so the dispatch type was actually undefined

The change:

 const START_AUTH = "START_AUTH"; 

in

 export const START_AUTH = "START_AUTH"; 

Solved a problem.

Answer 2

This is for those who stumble here to find the answer. What @danielfranca posted is just a symptom.

In fact, it happened that after sending the action an error occurred (on the original page), so the action did not complete. Refer to wrapStore.js or below (in case of changes to 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 the result. But if an error occurred during this (in the gearbox), you will not get the result.

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

Therefore, it does not send anything (undefined) ( see here ). And in Store.js , the dispatch function tries to extract the error key from undefined , which caused an error.

As you view the popup / content page, you get this very vague error message. If you check your background page, you will see the actual error.

I created