Javascript Cannot access class before initialization

I have the following bit of code whereby I’m using class expressions

const ShapeOverlays = class {
  constructor(elm) {
    this.elm = elm;
    this.path = elm.querySelectorAll('path');
    this.numPoints = 4;
    this.duration = 1000;
    this.delayPointsArray = [];
    this.delayPointsMax = 0;
    this.delayPerPath = 60;
    this.timeStart = Date.now();
    this.isOpened = false;
    this.isAnimating = false;
  }
}

(function() {
  const elmHamburger = document.querySelector('.hamburger');
  const gNavItems = document.querySelectorAll('.global-menu__item');
  const elmOverlay = document.querySelector('.shape-overlays');
  const overlay = new ShapeOverlays(elmOverlay);

  elmHamburger.addEventListener('click', () => {
    if (overlay.isAnimating) {
      return false;
    }
    overlay.toggle();
    if (overlay.isOpened === true) {
      elmHamburger.classList.add('is-opened-navi');
      for (var i = 0; i < gNavItems.length; i++) {
        gNavItems[i].classList.add('is-opened');
      }
    } else {
      elmHamburger.classList.remove('is-opened-navi');
      for (var i = 0; i < gNavItems.length; i++) {
        gNavItems[i].classList.remove('is-opened');
      }
    }
  });
}());

But I’m getting the error

Uncaught ReferenceError: Cannot access 'ShapeOverlays' before initialization

on the line const overlay = new ShapeOverlays(elmOverlay); which is weird because the class has been initialized above. What I’m I doing wrong? Thanks.

Answer

Your class expression is missing a semicolon.

const ShapeOverlays = class {
  constructor(elm) {
    // ...
  }
}; // <-- this one

Working:

const Test = class {
  constructor() {
    this.isOpened = false;
    this.isAnimating = false;
  }
};

(function() {
  const overlay = new Test(4);
  console.log(overlay)
}());

Not working:

const Test = class {
  constructor() {
    this.isOpened = false;
    this.isAnimating = false;
  }
}

(function() {
  const overlay = new Test(4);
  console.log(overlay)
}());