web-dev-qa-db-fra.com

TypeError: Impossible de lire la propriété «erreur» de non défini sur React Chrome Extension

Je développe un React Chrome extension utilisant la bibliothèque React-Chrome-Redux

C'est la première fois que je développe en utilisant cela et je suis coincé dans une erreur dont je ne peux pas comprendre la raison.

Mon application contextuelle échoue à l'exécution avec le message d'erreur suivant sur la console:

Erreur dans le gestionnaire d'événements pour (inconnu): TypeError: Impossible de lire la propriété "erreur" de non défini

J'ai essayé de déboguer et de définir un point d'arrêt à l'emplacement exact de l'erreur:

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

sur le rappel Promise, le _ref2 n'est pas défini lorsque l'action est: tapez: "chromex.dispatch" et la charge utile est également indéfinie.

Cela a commencé à se produire après l'introduction d'une méthode de répartition pour démarrer le processus d'authentification, le code est le suivant:

class App extends Component {

  constructor(props) {
    super(props);

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

Sur popup/index.js et background/index.js, je définis le canal de communication du magasin:

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

J'ai beaucoup de messages de journalisation sur le processus d'authentification, mais rien ne semble se produire.

Dans le noyau/j'ai les fichiers communs, comme les réducteurs, les types d'actions, les actions, etc., il est toujours traduit d'ES6 par webpack-babel.

Malheureusement, il semble que les outils React dev ne fonctionnent pas sur les extensions Chrome pour faciliter le débogage).

Une idée ou toute autre information dont vous avez besoin pour m'aider à comprendre ce qui se passe et comment y remédier?

javascriptreactjsgoogle-chrome-extensionreduxreact-redux
8
danielfranca

La solution était beaucoup plus simple que ce à quoi je m'attendais.

Les noms des actions n'étaient pas exportés, donc le type distribué était en fait undefined

Changement de:

const START_AUTH = "START_AUTH";

à:

export const START_AUTH = "START_AUTH";

Résolu le problème.

7
danielfranca

C'est pour tous ceux qui tombent sur ici à la recherche d'une réponse. Ce que @danielfranca a publié n'est qu'un symptôme.

Ce qui s'est réellement passé, c'est qu'une erreur est renvoyée (dans la page d'arrière-plan) après l'envoi de l'action, si bien que l'action n'a pas pu se terminer. Reportez-vous à wrapStore.js ou ci-dessous (au cas où il y aurait des changements dans leur 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;
  }
});

Cette ligne ci-dessous, store.dispatch(action) renvoie un résultat. Mais si une erreur s'est produite pendant cela (dans le réducteur), alors vous n'obtenez pas le résultat.

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

Donc, il ne renvoie rien (non défini) ( voir ici ). Et dans le Store.js , la fonction dispatch essaie de récupérer la clé error de undefined, ce qui a provoqué l'erreur.

Parce que vous inspectez la page popup/contenu, vous obtenez ce message d'erreur très vague. Si vous inspectez votre page d'arrière-plan, vous verrez l'erreur réelle.

J'ai créé un PR pour afficher un message d'erreur plus utile. J'espère que ça va fusionner.

9
Edmund Lee