web-dev-qa-db-ja.com

TypeError：React Chrome Extensionで未定義のプロパティ 'error'を読み取ることができません

私はReact=Chrome= React-Chrome-Reduxライブラリを使用した拡張

これを使用して開発するのは初めてであり、理由がわからないエラーが発生しました。

実行時にポップアップアプリが失敗し、コンソールに次のエラーメッセージが表示されます。

（不明）のイベントハンドラーのエラー：TypeError：未定義のプロパティ '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);
      }
    });
  });
}

promiseコールバックでは、アクションがtype： "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'
});

認証プロセスに関するメッセージをたくさん記録していますが、何も起こらないようです。

コア/レデューサー、アクションタイプ、アクションなどの共通ファイルがありますが、webpack-babelによってES6から常に変換されます。

残念ながら、React devツールはデバッグに役立つ拡張機能Chromeで動作しません。

何が起こっているのか、どのように修正するのかを理解するのに役立つアイデアや情報はありますか？

javascriptreactjsgoogle-chrome-extensionreduxreact-redux
8
danielfranca

解決策は予想よりもずっと簡単でした。

アクション名はエクスポートされていなかったため、ディスパッチされるタイプは実際にはundefinedでした

変更後：

const START_AUTH = "START_AUTH";

に：

export const START_AUTH = "START_AUTH";

問題を解決しました。

7
danielfranca

これは、答えを求めてここを偶然見つけた人のためのものです。 @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)は結果を返します。ただし、その間に（リデューサーで）エラーが発生した場合、結果は得られません。

_dispatchResponder(store.dispatch(action), sendResponse);
_

したがって、何も返されません（未定義）（ ここを参照 ）。そして、 Store.js では、dispatch関数がerrorからundefinedキーを取得しようとするため、エラーが発生しました。

ポップアップ/コンテンツページを検査しているため、この非常にあいまいなエラーメッセージが表示されます。バックグラウンドページを調べると、実際のエラーが表示されます。

[〜＃〜] pr [〜＃〜] を作成して、より役立つエラーメッセージを表示しました。うまくいけば、マージされます。

9
Edmund Lee