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

Question

我有一个 class 视图，我正在导入它，然后用 galleryView 扩展它。然后我将最终的 galleryView 导入 controller.js.. 在这条路上的某个地方我做错了我收到此错误..

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

但我不知道我做错了什么.. 是 babel 还是 webpack 还是我的代码？

这是我用于开发的 webpack 配置文件..

// 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"],
          },
        },
      },
    ],
  },
};

这是视图 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();

这是扩展的 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();

这是 controller.js 的开头几行，我认为问题出在此处（我可能错了）

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

// GALLERY AND MORE ....

这是我的 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"
  }
}

如果你能弄清楚我可能做错了什么，请告知。我用谷歌搜索并搜索了相关问题，并阅读了一些关于 babel 不允许某种导出等令人困惑的东西。但我非常babel 的新手，真的不知道应该关注哪个相关帖子..

如有任何帮助或指导，我们将不胜感激。

Answer 1

export default new View();

应该是

export default View;

或者你可以直接做

export default class View {

当您制作 class 并扩展 class 时，您 extend 是 class 本身，例如

class View {}
class galleryView extends View {}

但现在你做错了

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

您在其中扩展了 class 的实例，这没有意义。

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

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

javascript

webpack

babeljs

babel-loader