Question

开发React Chrome扩展程序

这是我第一次使用这个，我陷入了一个错误，我无法弄清楚原因。

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

（未知）事件处理程序出错：TypeError：无法读取属性未定义的'错误'

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

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时，_ref2是未定义的：键入：“chromex.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'
});

我在身份验证过程中有很多日志消息，但似乎没有任何事情发生。

在核心中/我有常用文件，如缩减器，动作类型，动作等，它总是由Webpack-babel从ES6翻译过来。

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

您需要什么想法或更多信息来帮助我弄清楚发生了什么以及如何解决这个问题？

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

所以它没有发回任何内容（未定义）（refer to here）。在Store.js中，dispatch函数尝试从error检索undefined密钥，从而导致错误。

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

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

Answer 2

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

未导出操作名称，因此调度的类型实际上是undefined

改变自：

const START_AUTH = "START_AUTH";

为：

export const START_AUTH = "START_AUTH";

解决了这个问题。

TypeError：无法在React Chrome扩展程序

2 个答案: