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

Question

开发 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 回调中，当操作为以下时，_ref2 未定义：类型："chromex.dispatch" 并且有效载荷也未定义。

这是在引入一个dispatch方法来启动认证过程后开始发生的，代码如下：

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 扩展上工作以帮助调试。

您有任何想法或更多信息可以帮助我弄清楚发生了什么以及如何解决它吗？

Answer 1

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

没有导出动作名称，所以调度的类型实际上是 undefined

更改自：

const START_AUTH = "START_AUTH";

至：

export const START_AUTH = "START_AUTH";

问题解决了。

Answer 2

这是为偶然发现这里寻找答案的任何人准备的。 @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)returns一个结果。但是，如果在此期间（在减速器中）发生错误，那么您将得不到结果。

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

所以它什么都不发回（未定义）（refer to here). And in the Store.js，dispatch 函数尝试从 undefined 检索 error 键，这导致了错误。

因为您正在检查 popup/content 页面，所以您收到了这条非常模糊的错误消息。如果您检查您的背景页面，您将看到实际的错误。

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

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

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

javascript

google-chrome-extension

reactjs

redux

react-redux