title: either babel or webpack or my code are causing this error "Uncaught TypeError: Super expression must either be null or a function"
body: <p>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..</p>
  <p><code>Uncaught TypeError: Super expression must either be null or a function</code></p>
  <p>But I can't figure out what I am doing wrong.. is it babel or webpack or my code?</p>
  <p>Here's my webpack config file for development..</p>
  <pre><code>// SOURCE OF TUTORIAL
  // https://www.youtube.com/watch?v=MpGLUVbqoYQ&amp;t=1205s
  
  const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  const path = require(&quot;path&quot;);
  
  module.exports = {
    mode: &quot;development&quot;,
    devtool: false,
    entry: {
      main: &quot;./src/js/controller.js&quot;,
      model: &quot;./src/js/model.js&quot;,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: &quot;./src/main.html&quot;,
      }),
    ],
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            &quot;style-loader&quot;, // injects STYLES into DOM
            &quot;css-loader&quot;, // turns CSS into commonjs
            &quot;sass-loader&quot;, // turns SASS into CSS
          ],
        },
        {
          test: /\.html$/,
          use: [&quot;html-loader&quot;],
        },
        {
          test: /\.(png|gif|svg|jpe?g)$/,
          type: &quot;asset/resource&quot;,
        },
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: &quot;babel-loader&quot;,
            options: {
              presets: [&quot;@babel/preset-env&quot;],
            },
          },
        },
      ],
    },
  };
  
  </code></pre>
  <p>Here's the View Class</p>
  <pre><code>class View {
    //   _data;
    constructor() {
      this.data;
    }
  
    // UPDATED for ELEMENT
    render(data) {
      if (!data) return console.log(&quot;No data!!&quot;);
  
      this.data = data;
      const markup = this.generateMarkup();
  
      this.parentElement.insertAdjacentElement(&quot;afterbegin&quot;, markup);
    }
  }
  
  export default new View();
  
  
  </code></pre>
  <p>Here's the extended galleryView</p>
  <pre><code>import View from &quot;./view.js&quot;;
  
  class galleryView extends View {
    constructor() {
      super();
      this.parentElement = document.getElementById(&quot;gallery&quot;);
      this.errorMessage = &quot;some error message&quot;;
      this.message = &quot;some other message&quot;;
    }
  
    generateMarkup() {
      return `
       &lt;section id=&quot;gallery&quot; class=&quot;gallery-content&quot;&gt; 
  &lt;p&gt;some text here&lt;/p&gt;
  &lt;/section&gt;
                  
      `;
    }
  }
  
  export default new galleryView();
  
  </code></pre>
  <p>Here's the opening lines for controller.js where I think the problem occurs (I could be wrong)</p>
  <pre><code>import &quot;./../css/main.scss&quot;;
  import galleryView from &quot;./view/galleryView.js&quot;;
  
  // GALLERY AND MORE ....
  
  
  </code></pre>
  <p>And here's my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;brahma-gallery&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;The frontend views for Brahma's Gallery&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack serve --open --config webpack.dev.js &quot;,
      &quot;build&quot;: &quot;webpack --config webpack.prod.js&quot;
    },
    &quot;author&quot;: &quot;Alim Bolar&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.14.3&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.14.4&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;css-loader&quot;: &quot;^5.2.6&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;html-loader&quot;: &quot;^2.1.2&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^5.3.1&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^1.6.0&quot;,
      &quot;node-sass&quot;: &quot;^6.0.0&quot;,
      &quot;optimize-css-assets-webpack-plugin&quot;: &quot;^6.0.0&quot;,
      &quot;sass-loader&quot;: &quot;^11.1.1&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;webpack&quot;: &quot;^5.38.1&quot;,
      &quot;webpack-cli&quot;: &quot;^4.7.0&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;
    },
    &quot;dependencies&quot;: {
      &quot;clean-webpack-plugin&quot;: &quot;^4.0.0-alpha.0&quot;
    }
  }
  
  
  </code></pre>
  <p>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..</p>
  <p>Any help or guidance would be appreciated.</p>