33
votes

Référence non revêtue: Impossible d'accéder à '__webpack_default_export__' avant l'initialisation

J'ai un problème avec mon webpack proyect, donc j'essayais d'importer une classe dans une autre et de l'instancier mais soudain une erreur apparaît dans ma console et mon programme a cessé de fonctionner, c'était le suivant:

import ManageWeatherDashboard from './manageWeatherDashboard.js';
import { getFetch, repeatAppend } from './weatherHelpers.js';

class popupPlugin {
  constructor() {
    this.manageWeatherDashboardObj = new ManageWeatherDashboard();
  }

  validateStr(str) {
    const onlyLettersAndSpaces = /^[a-zA-Z][a-zA-Z\s]*$/;
    
    if(str.trim().length > 0 && str.match(onlyLettersAndSpaces)) {
      const strValue = str.toLowerCase().trim().replace(' ', '+');
      
      return strValue;
    }
  }
  
  searchCoincidences(val, parent) {
    getFetch(`https://www.metaweather.com/api/location/search/?query=${val}`)
      .then(res => res.text())
      .then(data => {
        const parentResults = document.querySelector('.'+parent);
        
        parentResults.innerHTML = '';
        
        const dataArr = JSON.parse(data)
        
        if(dataArr.length >= 15) {
          let resVal;
          
          for(let i = 0; i <= 15; i++) {
            resVal = this.addDOMResultCoincidences(parent, dataArr[i].title,
              dataArr[i].woeid);
          }
          
          this.whenClickCoincidence(resVal);
        } else {
          let resVal;
          
          dataArr.forEach(el => {
            resVal = this.addDOMResultCoincidences(parent, el.title, el.woeid);
          })
          
          this.whenClickCoincidence(resVal);
        }
        
      })
  }
  
  addDOMResultCoincidences(parentBlock, name, id) {
    const args = Array.from(arguments);
    
    if(args[0] === 'popup__results') {
      const popupResults = document.querySelector('.popup__results');

      const divResult = document.createElement('div');
      divResult.className = 'popup__result';
      divResult.setAttribute('data-woeid', id);
      
      const spanResultName = document.createElement('span');
      spanResultName.className = 'popup__result-name';
      
      const cityReturn = document.createTextNode(args[1]);
      
      spanResultName.appendChild(cityReturn);
      
      divResult.appendChild(spanResultName);
      
      popupResults.prepend(divResult);
      
      return divResult;
    }
    
    if(args[0] === 'weather__search-ui') {
      const weatherUI = document.querySelector('.weather__search-ui');
      
      const divResult = document.createElement('div');
      divResult.className = 'weather__search-result';
      divResult.setAttribute('data-woeid', id);
      
      const spanResultName = document.createElement('span');
      const spanResultNameText = document.createTextNode(args[1]);
      spanResultName.className = 'weather__city-result';
      spanResultName.appendChild(spanResultNameText);
      
      const iconResult = document.createElement('i');
      iconResult.className = 'fa fa-arrow-right weather__go-result';
      
      repeatAppend([spanResultName, iconResult], divResult);
      
      weatherUI.appendChild(divResult);
      
      return divResult;
    }
  }
  
  // When click a coincidence in search field
  
  whenClickCoincidence(el) {
    const woeId = el.getAttribute('data-woeid');
    
    el.addEventListener('click', () => {
      let handler = 0;
      
      if(handler === 0) {
        getFetch(`https://www.metaweather.com/api/location/${woeId}/`)
          .then(res => res.json())
          .then(data => {
            const popup = document.querySelector('.popup');
            
            const weatherNext6Days = data.consolidated_weather;
            
            this.manageWeatherDashboardObj.changeWeatherBar(weatherNext6Days[0], data.title);
            
            weatherNext6Days.slice(1, 6).forEach(el => {
              this.manageWeatherDashboardObj.nextFiveDays(el);
            })
            
            this.manageWeatherDashboardObj.updateStadistics(weatherNext6Days[0]);
            
            popup.style.opacity = '0';
            popup.style.visibility = 'hidden';
          })
      }
      
      handler += 1;
    })
  }
}

export default popupPlugin;


4 commentaires

Quelle version de WebPack utilisez-vous?


Désolé d'avoir laissé ce commentaire inactif, j'ai la version la plus récente dans NPM 5.12.0


Comment exécutez-vous WebPack? Via CLI? Via NPM Run? Tout autre?


J'exécute WebPack via CLI.


7 Réponses :


7
votes

J'ai fait face au même problème lorsque j'ai déplacé l'instruction d'importation pour le magasin Redux en dessous de l'importation d'un module local qui faisait face à une référence de réducteur du magasin. Déplacement du magasin Importer à partir de ./store Upward a résolu ce problème pour moi.

Essayez de corriger l'ordre des importations dans vos fichiers.


1 commentaires

FWIW, mon problème était d'instancier un singleton basé sur des modules importés. Semblable à votre suggestion, il a été corrigé en déplaçant l'instanciation de Singleton à un chèque dans un appel de fonction pour obtenir le singleton.



25
votes

Cela peut être causé par une dépendance cyclique (c'est-à-dire le module d'importation de module B et vice versa en même temps). Jetez un aperçu de votre code.


1 commentaires

J'ai eu ce problème et c'était une question de dépendances circulaires



-1
votes

Ce n'est pas exactement ce qui me fait la même erreur.

Les miens ont été causés par l'appel des choses comme UseState, UseEffecte et Firebase () en dehors du bloc de composant fonctionnel principal. C'est très stupide mais je l'ai complètement manqué.

J'espère que cela aide toute personne du futur qui a eu le même problème que le mien.


0 commentaires

-2
votes

peut-être parce que vous avez utilisé Circle Import.

Pour moi, j'ai utilisé Axios encapsulé pour demander dans Mobx Store, et j'ai également utilisé certaines données de Mobx Store dans Axios encapsulé.


1 commentaires

Comme il est actuellement écrit, votre réponse n'est pas claire. S'il vous plaît modifier pour ajouter des détails supplémentaires qui aideront les autres à comprendre comment cela répond à la question posée. Vous pouvez trouver plus d'informations sur la façon d'écrire de bonnes réponses dans le centre d'aide .



1
votes

En utilisant mon IDE Auto Import, j'avais quelque chose comme:

import { useStore, useCart } from "../lib/store"

Tout fonctionnait bien pendant un certain temps! Mais ensuite, j'ai eu la même erreur jusqu'à ce que j'aie changé mon importation pour ressembler à ceci:

import useStore, { useCart } from "../lib/store"


0 commentaires

2
votes

Pour toute personne dont le problème n'est pas une dépendance circulaire, il pourrait également s'agir d'une importation manquante.

Dans mon cas, en utilisant le matériel UI 5, j'ai oublié la ligne Importer {Styled} à partir de "@ Mui / Styles"; , ce qui m'a donné cette erreur:

UNCAPED ReferenceError: Impossible d'accéder à '__webpack_default_export__' avant l'initialisation

Au lieu de la référence: MyModule n'est pas définie Erreur d'importation manquante.


0 commentaires

0
votes

Dans mon cas, j'essayais juste d'appeler la fonction de répartition avant que le magasin ne soit entièrement chargé - c'est-à-dire store.dispatch ()


0 commentaires