either babel or webpack or my code are causing this error "Uncaught TypeError: Super expression must either be null or a function"

Question

I have a class View that I am importing and then extending it with galleryView .. Then I import the final galleryView into controller.js.. Somewhere along this path I am doing something wrong as I get this error..

Uncaught TypeError: Super expression must either be null or a function

But I can't figure out what I am doing wrong.. is it babel or webpack or my code?

Here's my webpack config file for development..

// SOURCE OF TUTORIAL
// https://www.youtube.com/watch?v=MpGLUVbqoYQ&t=1205s

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: "development",
  devtool: false,
  entry: {
    main: "./src/js/controller.js",
    model: "./src/js/model.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/main.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader", // injects STYLES into DOM
          "css-loader", // turns CSS into commonjs
          "sass-loader", // turns SASS into CSS
        ],
      },
      {
        test: /\.html$/,
        use: ["html-loader"],
      },
      {
        test: /\.(png|gif|svg|jpe?g)$/,
        type: "asset/resource",
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

Here's the View Class

class View {
  //   _data;
  constructor() {
    this.data;
  }

  // UPDATED for ELEMENT
  render(data) {
    if (!data) return console.log("No data!!");

    this.data = data;
    const markup = this.generateMarkup();

    this.parentElement.insertAdjacentElement("afterbegin", markup);
  }
}

export default new View();

Here's the extended galleryView

import View from "./view.js";

class galleryView extends View {
  constructor() {
    super();
    this.parentElement = document.getElementById("gallery");
    this.errorMessage = "some error message";
    this.message = "some other message";
  }

  generateMarkup() {
    return `
     <section id="gallery" class="gallery-content"> 
<p>some text here</p>
</section>
                
    `;
  }
}

export default new galleryView();

Here's the opening lines for controller.js where I think the problem occurs (I could be wrong)

import "./../css/main.scss";
import galleryView from "./view/galleryView.js";

// GALLERY AND MORE ....

And here's my package.json

{
  "name": "brahma-gallery",
  "version": "1.0.0",
  "description": "The frontend views for Brahma's Gallery",
  "scripts": {
    "start": "webpack serve --open --config webpack.dev.js ",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "Alim Bolar",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.6.0",
    "node-sass": "^6.0.0",
    "optimize-css-assets-webpack-plugin": "^6.0.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0"
  }
}

Please advise if you can figure out what I could be doing wrong.. I've googled and searched for related issues and read up some confusing stuff on babel not allowing some sort of exports etc.. but I am very new to babel and don't really know which of the related posts to follow..

Any help or guidance would be appreciated.

Answer 1

export default new View();

should be

export default View;

or you can directly do

export default class View {

When you make a class and extend a class, you extend the class itself, e.g.

class View {}
class galleryView extends View {}

but right now you are incorrectly doing

class View {}
class galleryView extends (new View()) {}

where you extend an instance of the class, which does not make sense.