title: ReferenceError: can't access lexical declaration `Tag' before initialization
body: <p>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. </p>
  
  <p>So there is an index.js file with Class Tag. </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>And the banner component js file. </p>
  
  <pre><code>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();
  </code></pre>
  
  <p>I've used almost basic Webpack configuration, with few simple plugins and loaders.</p>
  
  <p>If I don't split those to the separate files, it works perfectly, but when I try to put it separate i have: </p>
  
  <pre><code>ReferenceError: can't access lexical declaration `Tag' before initialization main.4f842e.js line 469 &gt; eval:2:95
  &lt;anonymous&gt; webpack:///./src/index.js?:2
  &lt;anonymous&gt; 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
  &lt;anonymous&gt; webpack:///./src/index.js?:3
  js http://localhost:8080/js/main.4f842e.js:469
  __webpack_require__ http://localhost:8080/js/main.4f842e.js:20
  &lt;anonymous&gt; 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
  &lt;anonymous&gt; http://localhost:8080/js/main.4f842e.js:84
  &lt;anonymous&gt; http://localhost:8080/js/main.4f842e.js:87
  </code></pre>
  
  <p>So I'm asking for a help why it doesn't work that way? Thanks for your help in advance. </p>