Hi I'm working on a Vanilla JS SPA project, and I wanted to implement some principles from React, but just in plain JavaScript. But there is an issue with importing classes, that I'm not sure whats going on. I've looked through some answers to similar topics, but non were helpful so far.

So there is an index.js file with Class Tag.

import { banner } from './ponents/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;
}

And the banner ponent js file.

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 ponents.
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();

I've used almost basic Webpack configuration, with few simple plugins and loaders.

If I don't split those to the separate files, it works perfectly, but when I try to put it separate i have:

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/ponents/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

So I'm asking for a help why it doesn't work that way? Thanks for your help in advance.

Hi I'm working on a Vanilla JS SPA project, and I wanted to implement some principles from React, but just in plain JavaScript. But there is an issue with importing classes, that I'm not sure whats going on. I've looked through some answers to similar topics, but non were helpful so far.

So there is an index.js file with Class Tag.

import { banner } from './ponents/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;
}

And the banner ponent js file.

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 ponents.
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();

I've used almost basic Webpack configuration, with few simple plugins and loaders.

If I don't split those to the separate files, it works perfectly, but when I try to put it separate i have:

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/ponents/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

So I'm asking for a help why it doesn't work that way? Thanks for your help in advance.

• javascript
• class
• import
• scope
• export

• You are missing a } at the end of first code block. Is this a copy-paste example, or is this mistake also present in your code? Also, are you sure there are no other problems? It looks the code in ponent.js fails to import the Tag name, and when you try to use it, it does not know what is Tag. – Marko Gresak Commented Mar 18, 2020 at 19:25
• Sorry. That was copy paste and didn't copied last } . Now it's edited as it it suppose to. I think I'm on track what's going on. Still doing different configurations. But maybe someone going to be faster, before I'm going to fix it. – PostR Commented Mar 18, 2020 at 19:30

2 Answers 2

You have to eliminate circular (recursive) references, in which you can use an object before it has been instantiated. In other words, banner is supposed to contain an instance of Tag (referencing a value) whose class has not been defined (before initialization).

Your index.js imports banner and banner.js imports Tag. So the index.js is expecting banner to contain an instance of Tag already, before Tag is defined. banner.js is trying to import index.js, which is trying to import banner.js, which is trying to import index.js, etc.

Removing the import { Tag } from '../index.js' statement from banner.js and moving the Tag definition from index.js into banner.js should resolve the problem.

Don't know if this may help but I had a similar problem looping through an array while setting it while declaring the variable. Example of the mistake:

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

To fix this issue I changed the code statement from the above to this

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