未捕获的 ReferenceError: 初始化前无法访问“__WEBPACK_DEFAULT_EXPORT__”

Question

我的 webpack proyect 有问题，所以我试图将一个类导入另一个类并实例化它，但突然在我的控制台中出现错误并且我的程序停止工作，是这样的：

Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

这是我尝试导入另一个类（即 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;

我实际上不知道为什么会发生这种情况，我也尝试在构造函数中实例化它并且它工作但它向我发送了堆栈溢出的错误。

PD：如果有人需要，这里是 PopupPlugin 的代码。（这是对我有用的方法，即在构造函数中实例化类，直到出现堆栈溢出错误）

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;

Answer 1

这可能是由循环依赖引起的（即模块A同时导入模块B，反之亦然）。更深入地查看您的代码。

Answer 2

当我将 redux 存储的导入语句移到处理存储中的某些减速器引用的本地模块的某些导入下方时，我遇到了同样的问题。向上移动import store from ./store为我解决了这个问题。

尝试修复文件中的导入顺序。

Answer 3

从 webpack 4 升级到 webpack 5 后遇到了这个问题，是的，在我的例子中这是一个循环依赖。

此外，我发现了这篇博客如何从 JavaScript 项目中消除循环依赖，这让我访问了https://github.com/aackerman/circular-dependency-plugin

按照 github 上的示例，将插件放入我的 webpack 开发配置中，然后花一些时间阅读其输出，找出我出错的地方。一旦我知道了问题所在，解决问题就变得非常容易——这是一个非常基本的错误。

circular-dependency-plugin@5.2.2 显然可以在 webpack 4 上工作，我可以确认它也可以在 webpack@5.73.0 上工作。为我节省了大量时间:-) 在完成工作后，您可以将其从 webpack 开发配置中取出。

Answer 4

就我而言，这是由于循环导入造成的。这意味着两个模块正在相互导出和导入内容