babel 或 webpack 或我的代码导致此错误“未捕获的类型错误：超级表达式必须为空或函数”

问题描述

我有一个类 View，我正在导入它，然后用 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 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 并且真的不知道要关注哪些相关帖子..

任何帮助或指导将不胜感激。

解决方法

export default new View();

应该

export default View;

或者你可以直接做

export default class View {

当你创建一个类并扩展一个类时，你extend这个类本身，例如

class View {}
class galleryView extends View {}

但现在你做错了

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

在哪里扩展类的实例，这是没有意义的。