6

मैं एक React-Chrome-Redux libraryलेखन त्रुटि: संपत्ति प्रतिक्रिया क्रोम एक्सटेंशन

का उपयोग कर यह इस का उपयोग करते हुए पहली बार मैं विकसित है क्रोम एक्सटेंशन प्रतिक्रिया के विकास कर रहा हूँ और मुझे एक त्रुटि में फंस पर 'त्रुटि' अपरिभाषित का पढ़ा नहीं जा सकता है कि मैं यह कर सकते हैं ' कारण पता नहीं है।

मेरे पॉपअप एप्लिकेशन कंसोल पर निम्न त्रुटि संदेश के साथ क्रम पर विफल हो रहा है:

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

वादा कॉलबैक पर _ref2 अपरिभाषित है जब कार्रवाई है: टाइप: "chromex.dispatch" और पेलोड भी अनिर्धारित है।

इस के बाद एक प्रेषण विधि परिचय प्रमाणीकरण प्रक्रिया शुरू करने के लिए हो रहा शुरू कर दिया, कोड इस प्रकार है:

class App extends Component { 

    constructor(props) { 
    super(props); 

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

दोनों पॉपअप/index.js और पृष्ठभूमि/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' 
}); 

मेरे पास प्रमाणीकरण प्रक्रिया पर बहुत सारे लॉगिंग संदेश हैं, लेकिन कुछ भी नहीं होने लगता है।

कोर/मेरे पास सामान्य फाइलें हैं, जैसे रेड्यूसर, एक्शन टाइप, एक्शन इत्यादि, इसका हमेशा ईएस 6 से वेबपैक-बेबेल द्वारा अनुवाद किया जाता है।

दुर्भाग्यवश ऐसा लगता है कि प्रतिक्रिया देव उपकरण डीबगिंग में सहायता के लिए क्रोम एक्सटेंशन पर काम नहीं करते हैं।

क्या कोई विचार या कोई और जानकारी जो आपको यह जानने में मदद करने के लिए है कि क्या हो रहा है और इसे कैसे ठीक किया जाए?

उत्तर

6

समाधान अपेक्षा से कहीं अधिक सरल था।

कार्रवाई नामों निर्यात किया गया नहीं किया जा रहा है, तो प्रकार भेजा जा रहा से बदल रहा है वास्तव में undefined

था:

const START_AUTH = "START_AUTH"; 

रहे हैं:

export const START_AUTH = "START_AUTH"; 

समस्या हल।

7

यह किसी भी व्यक्ति के लिए है जो उत्तर के लिए खोज में ठोकर खाता है। क्या @danielfranca पोस्ट सिर्फ लक्षण है।

वास्तव में क्या हुआ, कार्रवाई के प्रेषण के बाद एक त्रुटि (पृष्ठभूमि पृष्ठ में) फेंक दिया गया है, इसलिए कार्रवाई समाप्त होने में विफल रही। wrapStore.js या उससे नीचे का संदर्भ लें (यदि उनके गिथब में परिवर्तन हो)।

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 फ़ंक्शन undefined से error कुंजी पुनर्प्राप्त करने का प्रयास करता है, जिससे त्रुटि उत्पन्न हुई।

क्योंकि आप पॉपअप/सामग्री पृष्ठ का निरीक्षण कर रहे हैं, तो आपको यह बहुत अस्पष्ट त्रुटि संदेश मिलता है। यदि आप अपने पृष्ठभूमि पृष्ठ का निरीक्षण करते हैं, तो आपको वास्तविक त्रुटि दिखाई देगी।

मैंने एक और उपयोगी त्रुटि संदेश प्रदर्शित करने के लिए PR बनाया है। उम्मीद है कि यह विलय हो जाएगा।

+0

एक व्यापक समस्या का महान जवाब। यह मुझे पृष्ठभूमि पृष्ठ में मेरी वाक्यविन्यास त्रुटि खोजने में मदद करता है जो मेरी .babelrc फ़ाइल की गलत कॉन्फ़िगरेशन के कारण था। –

संबंधित मुद्दे