StencilJS组件ReferenceError：添加第三方脚本时，Firefox中出现“模块未定义”错误

Question

我在Firefox中遇到组件问题。我几乎在所有浏览器，Safari，Opera，Brave，Chrome浏览器中进行了测试……只有Firefox Quantum 66.0.3（64位）才有问题。

我提供的代码是整个组件的基本版本。我得到的错误是ReferenceError: "module is not defined"和TypeError: "jQuery(...).setsameheight is not a function"。 （使用npm start --es5在本地运行Stencil时（jQuery也由script.js加载）。我真的不知道还能尝试什么。

该脚本是项目必需的，无法编辑。

我正在使用“@stencil/core”: “0.18.0"作为组件构建器。我也尝试过“@stencil/core”: “~0.16.2"

import { Component, Prop, State, Element } from '@stencil/core';
import * as SCRIPT from '../../assets/script.js';

declare var jQuery: any;

@Component({
  tag: 'events',
  shadow: false
})

export class Events {

  @Element() private element: HTMLElement;

  componentDidLoad() {
    SCRIPT
  }

  componentDidUpdate() {
      const elements = this.element.querySelectorAll('div.fluid')
      for (let element of elements) {
        jQuery(element).setsameheight()
      }
    }

}

ReferenceError指向community-component.core.pf.js:2485:7

function execBundleCallback(bundleId, deps, callback) {
    var bundleExports = {};
    try {
      callback.apply(null, deps.map(function(d) {
        if ('exports' === d) return bundleExports;
        if ('require' === d) return userRequire;
        return getLoadedBundle(d);
      }));
    } catch (e) {
      console.error(e); //line 2485
    }

Answer 1

您的'../../assets/script.js'似乎没有加载到firefox中。要使import语句起作用，您需要将dom.moduleScripts.enabled设置为true。

请参阅-https://starbeamrainbowlabs.com/blog/article.php?article=posts/260-es6-features-14-modules.html和https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import部分中的Browser compatibility