React Chrome扩展中的TypeError: Cannot read property 'error' of undefined。

Question

我正在使用 React-Chrome-Redux 库 开发一个 React Chrome 扩展。

这是我第一次使用它，我遇到了一个错误，但是无法找出原因。

我的弹出式应用在运行时崩溃，并在控制台上显示以下错误消息：

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

我尝试进行调试并在错误的确切位置设置断点：

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);
      }
    });
  });
}

在Promise回调函数中，当操作类型为“chromex.dispatch”，且有效载荷也未定义时，_ref2是未定义的。

在引入分派方法启动身份验证进程后，出现了这种情况，代码如下：

class App extends Component {

  constructor(props) {
    super(props);

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

我在popup / index.js和background / index.js上设置了存储通信通道：

//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'
});

我在认证过程中有很多日志信息，但好像没有任何反应。

在core/目录下，我有一些通用的文件，比如reducers、action types、actions等，它们总是由webpack-babel转换自ES6。

不幸的是，似乎React开发工具无法在Chrome扩展程序上工作，以帮助调试。

你有任何想法或需要更多信息来帮助我找出问题所在并解决它吗？

- dfranca

Answer 1

这是给那些在寻找答案中偶然发现这里的人。@danielfranca 发表的只是症状。

实际上发生的是，在触发操作后会抛出一个错误（在后台页面），因此操作未能完成。请参考wrapStore.js或以下内容（如果他们的 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;
  }
});

下面这行代码，store.dispatch(action)会返回一个结果。但是，如果在那个reducer中发生了错误，则不会得到结果。

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

因此它返回空（未定义）(请参阅此处)。在Store.js中，dispatch函数试图从undefined检索error键，导致错误。

因为您正在检查弹出窗口/内容页，所以会收到非常模糊的错误消息。 如果检查您的后台页面，您将看到实际的错误。

我创建了一个PR来显示更有用的错误消息。希望它能被合并。

- Edmund Lee

---

非常好的回答，解决了一个广泛存在的问题。这帮助我找到了后台页面中由于我的 .babelrc 文件配置不正确引起的语法错误。 - OctaviaLo

Answer 2

解决方案比我预期的要简单得多。

动作名称没有被导出，因此被调度的类型实际上是undefined。

从以下内容进行更改：

const START_AUTH = "START_AUTH";

to:

export const START_AUTH = "START_AUTH";

问题已解决。

- dfranca