时间戳

首页 > 解决方案 > TypeError：尝试创建另一个脚本文件的类的新实例时出现非法构造函数

javascript - TypeError：尝试创建另一个脚本文件的类的新实例时出现非法构造函数

问题描述

我使用 LitElement + WebPack 创建了一个包含大约 25 个自定义 Web 组件的库。该库包含组件（例如上下文菜单组件）和视图（例如也使用上下文菜单组件的自定义表）。

到目前为止，所有组件和代码都在一个 javascript 文件中。为了使包更加模块化，我创建了第二个入口点。现在所有的 ui 组件都有它们的依赖图以及特殊的矩阵表视图。

entry: {
  'ui-components': './src/index.js',
  'view-matrix': './src/view-matrix.js'
},

在 WebPack (v4) 我使用 splitChunks 优化：

optimization: {
    splitChunks: {
        chunks: 'all',
    },
}

如果我现在想在 view-matrix.js 中实例化一个 ui 组件（在 /src/index.js 中定义和导入），我会收到以下错误。

1）实例化（view-matrix.js:31）

import {MwNavigationContextmenu} from "./components/navigations/mw-navigation-contextmenu";
    
let contextMenu = new MwNavigationContextmenu();

2) 错误信息

TypeError: Illegal constructor (view-matrix.js:31)

在 index.js 中实例化同一行代码效果很好。

我确定，MwNavigationContextmenu 之前被定义为自定义 Web 组件：

window.customElements.define('mw-navigation-contextmenu', MwNavigationContextmenu);

3)MwNavigationContextmenu定义

./components/navigations/mw-navigation-contextmenu

import { MwNavigationContextmenu } from './src/MwNavigationContextmenu.js';

window.customElements.define('mw-navigation-contextmenu', MwNavigationContextmenu);

./src/MwNavigationContextmenu.js

import {html, LitElement} from 'lit-element';

export class MwNavigationContextmenu extends LitElement {
  static get properties() {
    return {
      // defined props
      // hasbutton: {type:Boolean},
    };
  }

  constructor() {
    super();
    // property defaults following
    // this.hasbutton = true;
  }

  render() {
    return html`
      Render context menu…
    `;
  }
}

所以有问题是在MwNavigationContextmenu中定义的index.js并且view-matrix.js由于任何原因都无法实例化类。

标签： javascriptwebpackweb-componentwebpack-4lit-element

解决方案

我开始怀疑多个入口点之间的共享组件，并在类似的 webpack 问题案例中找到了提示：https ://github.com/webpack/webpack/issues/6977#issuecomment-388826616

问题（据我了解）：来自两个入口点的脚本加载在同一页面上（而 Webpack 4 有这个经验法则：1 个入口点 = 1 个页面）。因此，必须生成共享运行时块而不是使用该splitChunks属性。

解决方案（编辑 webpack.config.js）

optimization: {
  runtimeChunk: {
    name: 'shared',
  },
}

感谢 GitHub 的 akx https://akx.github.io/

推荐阅读