javascript - StencilJS 组件在 Firefox 中不起作用

Question

我无法让一些 StencilJS 组件在 Firefox 中运行。该页面正在返回以下消息。

This Stencil app is disabled for this browser.

开发商：

ES5 builds are disabled during development to take advantage of 2x faster build times.
Please see the example below or our config docs if you would like to develop on a browser that does not fully support ES2017 and custom elements.
Note that by default, ES5 builds and polyfills are enabled during production builds.
When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds.
This is only an experiement and if it slows down app development then we will revert this and enable ES5 builds during dev.

在开发期间启用 ES5 构建：

npm run dev --es5  

对于 stencil-component-starter，使用：

npm start --es5  

在开发期间启用完整的生产构建：

npm run dev --prod  

对于 stencil-component-starter，使用：

npm start --prod  

当前浏览器的支持：

ES Module Imports: true
ES Dynamic Imports: false
Custom Elements: false
Shadow DOM: false
fetch: true
CSS Variables: true

当前浏览器：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:60.0) Gecko/20100101 Firefox/60.0  

我尝试了什么：

- Turned on the `customEmements` web component in `about:config`
- Ran Stencil with npm start --prod

有人对此有解决方案吗？

编辑：

运行时，npm start --es5我仅在 Firefox 中收到以下错误

ReferenceError
​
columnNumber: 1612
​
fileName: "http://localhost:3333/build/community-component/chunk-9a3c139c.es5.js"
​
lineNumber: 761
​
message: "module is not defined"

760 - 762 路从chunk-9a3c139c.es5.js

catch (e) { } t = "ibm-cxtype-" + t, e(document.documentElement).addClass("js ibm-v18 " + t), Modernizr.addTest("hires", function () { return 1 < (window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI || 1); }); }(jQuery), function (r) { r.browserTest = function (e, t) { var a = "unknown", s = function (e, t) { for (var i = 0; i < t.length; i += 1)
        e = e.replace(t[i][0], t[i][1]); return e; }, i = function (e, t, i, n) { var o = { name: s((t.exec(e) || [a, a])[1], i) }; return o[o.name] = !0, o.version = (n.exec(e) || ["X", "X", "X", "X"])[3], o.name.match(/safari/) && 400 < o.version && (o.version = "2.0"), "presto" === o.name && (o.version = 9.27 < r.browser.version ? "futhark" : "linear_b"), o.versionNumber = parseFloat(o.version, 10) || 0, o.versionX = "X" !== o.version ? (o.version + "").substr(0, 1) : "X", o.className = o.name + o.versionX, o; }; e = (e.match(/Opera|Navigator|Minefield|KHTML|Chrome/) ? s(e, [[/(Firefox|MSIE|KHTML,\slike\sGecko|Konqueror)/, ""], ["Chrome Safari", "Chrome"], ["KHTML", "Konqueror"], ["Minefield", "Firefox"], ["Navigator", "Netscape"]]) : e).toLowerCase(), r.browser = r.extend(t ? {} : r.browser, i(e, /(camino|chrome|firefox|netscape|konqueror|lynx|msie|opera|safari)/, [], /(camino|chrome|firefox|netscape|netscape6|opera|version|konqueror|lynx|msie|safari)(\/|\s)([a-z0-9\.\+]*?)(\;|dev|rel|\s|$)/)), r.layout = i(e, /(gecko|konqueror|msie|opera|webkit)/, [["konqueror", "khtml"], ["msie", "trident"], ["opera", "presto"]], /(applewebkit|rv|konqueror|msie)(\:|\/|\s)([a-z0-9\.]*?)(\;|\)|\s)/), r.os = { name: (/(win|mac|linux|sunos|solaris|iphone)/.exec(navigator.platform.toLowerCase()) || [a])[0].replace("sunos", "solaris") }, t || r("html").addClass([r.os.name, r.browser.name, r.browser.className, r.layout.name, r.layout.className].join(" ")); }, r.browserTest(navigator.userAgent); }(jQuery), function (e) { "function" == typeof define && define.amd ? define(["jquery"], e) : "undefined" != typeof exports ? module.exports = e(require("jquery")) : e(jQuery); }(function (c) { var o, s = window.Slick || {}; o = 0, (s = function (e, t) { var i, n = this; n.defaults = { accessibility: !0, adaptiveHeight: !1, appendArrows: c(e), appendDots: c(e), arrows: !0, asNavFor: null, prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>', nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>', autoplay: !1, autoplaySpeed: 3e3, centerMode: !1, centerPadding: "50px", cssEase: "ease", customPaging: function (e, t) { return c('<button type="button" data-role="none" role="button" tabindex="0" />').text(t + 1); }, dots: !1, dotsClass: "slick-dots", draggable: !0, easing: "linear", edgeFriction: .35, fade: !1, focusOnSelect: !1, infinite: !0, initialSlide: 0, lazyLoad: "ondemand", mobileFirst: !1, pauseOnHover: !0, pauseOnFocus: !0, pauseOnDotsHover: !1, respondTo: "window", responsive: null, rows: 1, rtl: !1, slide: "", slidesPerRow: 1, slidesToShow: 1, slidesToScroll: 1, speed: 500, swipe: !0, swipeToSlide: !1, touchMove: !0, touchThreshold: 5, useCSS: !0, useTransform: !0, variableWidth: !1, vertical: !1, verticalSwiping: !1, waitForAnimate: !0, zIndex: 1e3 }, n.initials = { animating: !1, dragging: !1, autoPlayTimer: null, currentDirection: 0, currentLeft: null, currentSlide: 0, direction: 1, $dots: null, listWidth: null, listHeight: null, loadIndex: 0, $nextArrow: null, $prevArrow: null, slideCount: null, slideWidth: null, $slideTrack: null, $slides: null, sliding: !1, slideOffset: 0, swipeLeft: null, $list: null, touchObject: {}, transformsEnabled: !1, unslicked: !1 }, c.extend(n, n.initials), n.activeBreakpoint = null, n.animType = null, n.animProp = null, n.breakpoints = [], n.breakpointSettings = [], n.cssTransitions = !1, n.focussed = !1, n.interrupted = !1, n.hidden = "hidden", n.paused = !0, n.positionProp = null, n.respondTo = null, n.rowCount = 1, n.shouldClick = !0, n.$slider = c(e), n.$slidesCache = null, n.transformType = null, n.transitionType = null, n.visibilityChange = "visibilitychange", n.windowWidth = 0, n.windowTimer = null, i = c(e).data("slick") || {}, n.options = c.extend({}, n.defaults, t, i), n.currentSlide = n.options.initialSlide, n.originalSettings = n.options, void 0 !== document.mozHidden ? (n.hidden = "mozHidden", n.visibilityChange = "mozvisibilitychange") : void 0 !== document.webkitHidden && (n.hidden = "webkitHidden", n.visibilityChange = "webkitvisibilitychange"), n.autoPlay = c.proxy(n.autoPlay, n), n.autoPlayClear = c.proxy(n.autoPlayClear, n), n.autoPlayIterator = c.proxy(n.autoPlayIterator, n), n.changeSlide = c.proxy(n.changeSlide, n), n.clickHandler = c.proxy(n.clickHandler, n), n.selectHandler = c.proxy(n.selectHandler, n), n.setPosition = c.proxy(n.setPosition, n), n.swipeHandler = c.proxy(n.swipeHandler, n), n.dragHandler = c.proxy(n.dragHandler, n), n.keyHandler = c.proxy(n.keyHandler, n), n.instanceUid = o++, n.htmlExpr = /^(?:\s*(<[\w\W]+>)[^>]*)$/, n.registerBreakpoints(), n.init(!0); }).prototype.activateADA = function () { this.$slideTrack.find(".slick-active").attr({ "aria-hidden": "false" }).find("a, input, button, select").attr({ tabindex: "0" }); }, s.prototype.addSlide = s.prototype.slickAdd = function (e, t, i) { var n = this; if ("boolean" == typeof t)
        i = t, t = null;

标签： javascriptfirefoxstenciljs