未捕获的引用错误：初始化之前无法访问“__WEBPACK_DEFAULT_EXPORT__”

问题描述 投票：0回答：14

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

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;
javascript webpack import export es6-modules
14个回答
62
投票

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

15
投票

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

import store from ./store
为我解决了这个问题。

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

11
投票

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

此外，我发现了这个博客How to Elimination Circular Dependency from Your JavaScript Project，这让我找到了https://github.com/aackerman/circular-dependency-plugin

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

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

5
投票

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

3
投票

对于任何问题不是循环依赖的人来说，它也可能是缺少导入。

就我而言，使用 Material UI 5，我忘记了 

import { styled } from "@mui/styles";
行，这给了我这个错误：

Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

而不是通常的

ReferenceError: MyModule is not defined
缺少导入错误。

2
投票

使用我的 IDE 自动导入，我得到了类似的结果：

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

有一段时间一切都工作正常！但后来我遇到了同样的错误，直到我将导入更改为如下所示：

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

就我而言，我只是想在商店完全加载之前调用调度函数 - 即 store.dispatch()

1
投票

在我的例子中，这是由于从通用 

index.ts
文件导入引起的，该文件也导出了受影响的对象。

例如说我的

./widgets/index.ts
看起来像：

export { WidgetA } from './widgets/object-a';
export { WidgetB } from './widgets/object-b';

并且在 

./widgets/object-b.ts
中这会导致 Webpack 错误：

import { WidgetA } from '../widgets';

但是这会起作用：

import { WidgetA } from '../widgets/object-a';
0
投票

nextjs 项目也有同样的问题。 切换到以前的版本或重新安装

node_modules/
- 没有帮助。

解决方案 - 删除 

build/
目录并重新启动构建。

0
投票

在我的例子中，入口点文件使用以下语法：

export default <symbol>;
0
投票

就我而言，在 store/test/fetchSmth.saga.ts 文件中，我试图导入一个不是来自商店的函数。

只需将此函数移至 store/test/utils.ts 文件对我有帮助。

0
投票

此错误也可能因未清除导出而发生。 导出默认组件名称=>所以还要检查所有文件组件名称是否正确作为组件名称？

-1
投票

也许是因为你使用了循环导入。

对于我来说，我在mobx store中使用了封装的axios来请求，并且我还在封装的axios中使用了mobx store中的一些数据。

-2
投票

这并不是导致我发生同样错误的原因。

我的问题是由于在主功能组件块之外调用 useState、useEffect 和 firebase() 等内容引起的。这很愚蠢，但我完全错过了它。

希望它可以帮助未来遇到与我相同问题的人。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.