ReferenceError: can't access lexical declaration `Tag' before initialization

Question

你好，我正在做一个 Vanilla JS SPA 项目，我想实现 React 的一些原则，但只是简单的 JavaScript。但是导入类时出现问题，我不确定发生了什么。我已经查看了类似主题的一些答案，但到目前为止没有帮助。

所以有一个带有 Class 标签的 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;
}

以及横幅组件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

所以我在寻求帮助，为什么它不起作用？提前感谢您的帮助。

Answer 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));

Answer 2

您必须消除循环（递归）引用，在循环引用中您可以在实例化之前使用对象。换句话说，banner 应该包含 Tag 的实例（引用一个值），其 class 尚未定义（在初始化之前）。

您的 index.js 导入 banner 和 banner.js 导入 Tag。因此 index.js 期望横幅在定义 Tag 之前已经包含 Tag 的实例。 banner.js 正在尝试导入 index.js，正在尝试导入 banner.js，正在尝试导入 index.js，等等

从 banner.js 中删除 import { Tag } from '../index.js' 语句并将 Tag 定义从 index.js 移动到 banner.js 应该可以解决问题。

ReferenceError: can't access lexical declaration `Tag' before initialization

ReferenceError: can't access lexical declaration `Tag' before initialization

javascript

import

scope

export

class