ReferenceError：在初始化之前无法访问词法声明“标签”答案

【问题标题】：ReferenceError: can't access lexical declaration `Tag' before initializationReferenceError：在初始化之前无法访问词法声明“标签”
【发布时间】：2020-06-29 22:13:49
【问题描述】：

您好，我正在开发一个 Vanilla JS SPA 项目，我想从 React 中实现一些原则，但只是在纯 JavaScript 中。但是导入类有一个问题，我不确定发生了什么。我浏览了一些类似主题的答案，但到目前为止没有帮助。

所以有一个带有 Class Tag 的 index.js 文件。

import { banner } from './components/banner.js';

export class Tag {
constructor(parent, child, attribute, text) {
    this.parent = parent;
    this.child = child;
    this.attribute = attribute;
    this.text = text;
    }
}

Tag.prototype.createTagElement = function() {
  let parent = this.parent;
  let child = this.child;
  let attribute = this.attribute;
  let text = this.text;

  child = document.createElement(child);
  parent.appendChild(child);
  child.innerHTML = text;

  for (let key in attribute) {
    if (attribute.hasOwnProperty(key)) {
        let value = attribute[key]; 

        child.setAttribute(key, value);
    }
  }

  return child;
}

还有banner组件js文件。

import { Tag } from '../index.js';

//Below from here there is only DOM structure writen in JavaScript;
// HTML DOM Site Structure based on my own custom Tag Class;
//Whole structure and code can be parted to independent components.
const body = document.querySelector("body");
const attribute = {"class": "test", "style": "background-color: red"};


//Site Banner
export const Banner = new Tag(
  body, 
  "div", 
  { "class": "banner" }, 
  "Banner"
); 
export const banner = Banner.createTagElement();

我几乎使用了基本的 Webpack 配置，只有几个简单的插件和加载器。

如果我不将它们拆分到单独的文件中，它会完美运行，但是当我尝试将其分开时，我有：

ReferenceError: can't access lexical declaration `Tag' before initialization main.4f842e.js line 469 > eval:2:95
<anonymous> webpack:///./src/index.js?:2
<anonymous> webpack:///./src/components/banner.js?:15
js http://localhost:8080/js/main.4f842e.js:457
__webpack_require__ http://localhost:8080/js/main.4f842e.js:20
<anonymous> webpack:///./src/index.js?:3
js http://localhost:8080/js/main.4f842e.js:469
__webpack_require__ http://localhost:8080/js/main.4f842e.js:20
<anonymous> webpack:///multi_(webpack)-dev-server/client?:2
0 http://localhost:8080/js/main.4f842e.js:480
__webpack_require__ http://localhost:8080/js/main.4f842e.js:20
<anonymous> http://localhost:8080/js/main.4f842e.js:84
<anonymous> http://localhost:8080/js/main.4f842e.js:87

所以我在寻求帮助，为什么它不能那样工作？提前感谢您的帮助。

【问题讨论】：

您在第一个代码块的末尾缺少 }。这是复制粘贴示例，还是您的代码中也存在此错误？另外，你确定没有其他问题吗？看component.js中的代码导入Tag名称失败，尝试使用时不知道Tag是什么。
对不起。那是复制粘贴，最后没有复制 } 。现在它已按预期进行了编辑。我想我正在跟踪正在发生的事情。还在做不同的配置。但在我修复它之前，也许有人会更快。

标签： javascript class import scope export

【解决方案1】：

不知道这是否有帮助，但我在声明变量时设置数组时遇到了类似的问题。错误示例：

// Code that threw the error
let labels = stores.map((store) => labels.push(store.storeName));

为了解决这个问题，我把上面的代码语句改成了这个

// Use this working code - stores is an array
let labels = [];
stores.map((store) => labels.push(store.storeName));

【讨论】：

这两者都不是最好的方法。 const labels = stores.map((store) => store.storeName);