Блог

Я не могу запустить некоторые компоненты 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/) amp;amp; 400 < o.version amp;amp; (o.version = "2.0"), "presto" === o.name amp;amp; (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,slikesGecko|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 amp;amp; 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 amp;amp; (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*(<[wW] >)[^>]*)$/, 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;