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

如何解决类型错误：尝试创建另一个脚本文件的类的新实例时出现非法构造函数

我使用 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 无法实例化类，无论出于何种原因。

解决方法

我开始怀疑多个入口点之间的共享组件，并在一个类似的 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/