Привет, я работаю над SPA-проектом Vanilla JS, и я хотел реализовать некоторые принципы из React, но просто JavaScript. Но есть проблема с импортом классов, я не уверен, что происходит. Я просмотрел некоторые ответы на похожие темы, но пока они не помогли.
Итак, есть индексный файл. 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();
Я использовал почти базовую c конфигурацию 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
Поэтому я прошу помощи, почему это не работает таким образом? Заранее благодарны за Вашу помощь.