I have an issue with a component in Firefox. I tested in pretty much all browsers, Safari, Opera, Brave, Chrome … only Firefox Quantum 66.0.3 (64-bit) has problems.
The code I provided is a basic version of the whole component. The error I get is ReferenceError: "module is not defined"
and TypeError: "jQuery(...).setsameheight is not a function"
. (jQuery is also loaded by script.js) when running Stencil locally with npm start --es5
. I really don't know what else to try.
The script is required for the project, it can't be edited.
I am using “@stencil/core”: “0.18.0"
, as a component builder. I also tried with “@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()
}
}
}
The ReferenceError points here 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
}
It seems like your '../../assets/script.js'
is not getting loaded in firefox
. To make import
statement work, you need to set dom.moduleScripts.enabled
to true
.
See - https://starbeamrainbowlabs.com/blog/article.php?article=posts/260-es6-features-14-modules.html as well as Browser compatibility
from section - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.