6

を反応させるのに未定義のプロパティ「エラー」を読んで、私は「私ができることをエラーで立ち往生することはできません理由を突き止める。例外TypeError:それはこれを使用して、私が開発し、初めてだ私は<a href="https://github.com/tshaddix/react-chrome-redux/wiki/Getting-Started" rel="noreferrer">React-Chrome-Redux library</a></p> <p>を使用して反応させ、クローム拡張を開発していクローム拡張

マイポップアップアプリは、コンソールに次のエラーメッセージが表示され、実行時に失敗している

:私はデバッグしようとしたし、エラーの正確な位置にブレークポイントを設定

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

プロミスコールバックでは、アクションが: タイプ:「chromex.dispatch」であり、ペイロードも未定義の場合、_ref2は未定義です。私は店の通信チャネルを設定するポップアップ/ index.jsと背景/ index.jsの両方で

class App extends Component { 

    constructor(props) { 
    super(props); 

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

これは後に認証プロセスを開始するには発送方法をご紹介起こって始めたが、コードは以下の通りです:

//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開発ツールは、Chrome拡張機能ではデバッグに役立たないようです。

何が起こっているのかを把握するのに役立つアイデアや情報があれば教えてください。

答えて

6

解決策は私が予想していたよりはるかに簡単でした。

ディスパッチされているタイプは、実際にundefined

から変更されたように、アクション名は、エクスポートされていませんでした。

const START_AUTH = "START_AUTH"; 

へ:

export const START_AUTH = "START_AUTH"; 

は、問題を解決しました。

7

これは、ここで回答を探している人のためのものです。 @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); 

したがって、何も返されません(未定義)(refer to here)。 Store.jsでは、dispatch関数はundefinedからerrorのキーを取得しようとしましたが、これが原因でエラーが発生しました。

ポップアップ/コンテンツページを調べているため、この非常に曖昧なエラーメッセージが表示されます。 背景ページを調べると、実際のエラーが表示されます。

もっと役立つエラーメッセージを表示するためにPRを作成しました。うまくいけばそれは合併するでしょう。

+0

広い問題に対する大きな答え。これは、私の.babelrcファイルの設定が間違っていたため、バックグラウンドページで構文エラーが見つかりました。 –

関連する問題