未捕获的ReferenceError:初始化前无法访问'__WEBPACK_DEFAULT_EXPORT__' [英] Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

问题描述

我的webpack产品有问题，因此我试图将一个类导入另一个类并将其实例化，但是突然在控制台中出现错误，我的程序停止工作了，就是这样:

i have a problem with my webpack proyect, so i was trying to import one class to another and instantiate it but suddenly an error appear in my console and my program stopped working, it was this:

Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

这是我正在尝试导入另一个类(即PopUpPlugin)的类的代码:

This is the code of the class were i am trying to import my another class (that is PopUpPlugin):

import PopupPlugin from './popupPlugin.js';

export const addSearchBtnEvent = (weatherUI) => {
  const searchBtn = document.querySelector('.weather__search');
  
  searchBtn.addEventListener('click', () => {
    weatherUI.style.opacity = '1';
    weatherUI.style.visibility = 'visible';
  })
}

export const addSearchExitEvent = (weatherUI) => {
  const weatherExit = document.querySelector('.weather__search-exit');
  
  weatherExit.addEventListener('click', () => {
    weatherUI.style.opacity = '0';
    weatherUI.style.visibility = 'hidden';
  })
}

const popupObj = new PopupPlugin();

class searchDashboard {
  constructor() {
    
  }
  
  setInputEvent() {
    const inputSearch = document.querySelector('.weather__city-search');
    const inputSearchBtn = document.querySelector('.weather__search-btn');
    
    inputSearchBtn.addEventListener('click', () => {
      const inputSearchVal = inputSearch.value;
      
      this.validateStr(inputSearchVal);
    });
  }
  
  validateStr() {
    const onlyLettersAndSpaces = /^[a-zA-Z][a-zA-Z\s]*$/;
    
    if(str.trim().length > 0 && str.match(onlyLettersAndSpaces)) {
      const strValue = str.toLowerCase().trim().replace(' ', '+');
      
      this.popupObj.searchCoincidences(strValue, 'weather__search-ui');
    }
  }
}

export default searchDashboard;

我实际上不知道为什么会这样，我也试图在构造函数中实例化它，并且它起作用了，但是它向我发送了堆栈溢出的错误.

I don't actually know why this is happening, i also tried to instantiate it inside the constructor and it worked but it sended me the error of an stack overflow.

PD:如果有人需要，这里是PopupPlugin的代码.(这是在实例化构造函数中的类直到出现堆栈溢出错误的工作对我来说是

PD: If someone needs it here is the code of the PopupPlugin. (Here is what was working to me that was instantiating the class inside the constructor until the stack overflow error appeared)

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;

推荐答案

当我将redux存储的import语句移到正在处理来自该存储的一些reducer引用的本地模块的某些导入下面时，我遇到了相同的问题..将 import存储从./store 向上移动对我来说解决了这个问题.

I faced the same issue when I moved the import statement for the redux store below some import of a local module that was dealing with some reducer reference from of the store. Moving the import store from ./store upwards resolved this issue for me.

尝试固定文件中的导入顺序.

Try fixing the order of imports in your files.

这篇关于未捕获的ReferenceError:初始化前无法访问'__WEBPACK_DEFAULT_EXPORT__'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！