ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.56k stars 784 forks source link

SyntaxError in Chrome/39.0.0.0 #2755

Closed chenyulun closed 2 years ago

chenyulun commented 3 years ago

Stencil version:

 @stencil/core@1.17.3<version>

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function

Expected behavior:

Old browsers should be able to load the polyfills.

Steps to reproduce:

Open a simple page using on Chrome/39.0.0.0 "Mozilla/5.0 (Linux; Android 5.1.1; vivo X7 Build/LMY47V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/39.0.0.0 Mobile Safari/537.36 MyAppHybrid/3.4.0 (MYAPPNAME 4.39.0) UnionPay/1.0 MYAPPNAME deviceId/AUUID_d0d6a8dc52d4247cc815328f5d72cca9b7abb81e deviceType/1 device-dpr/3.0 device-dr/640.0*360.0 networkState/WIFI" The stenciljs generated file won't be loaded and no custom element is defined in the page.

Related code:

// insert any relevant code here
'use strict';
(function () {
  var currentScript = document.currentScript;

  // Safari 10 support type="module" but still download and executes the nomodule script
  if (!currentScript || !currentScript.hasAttribute('nomodule') || !('onbeforeload' in currentScript)) {

If I comment out the if statement, it works fine

Other information:

chenyulun commented 3 years ago

chrome39``index-3187e9a7.system.js

if (n.$flags$&8) { // if  n.$flags === 9
                    var t = e.__lookupGetter__("childNodes"); // t = undefined
                    Object.defineProperty(e, "children", {get: function() {
                            return this.childNodes.map((function(e) {
                                return e.nodeType === 1
                            }))
                        }});
                    Object.defineProperty(e, "childElementCount", {get: function() {
                            return e.children.length
                        }});
                    Object.defineProperty(e, "childNodes", {get: function() {
                            var e = t.call(this); // error There is no ’call‘ method in undefined 
                            if ((p.$flags$ & 1) === 0 && He(this).$flags$ & 2) {
                                var n = new r;
                                for (var a = 0; a < e.length; a++) {
                                    var i = e[a]["s-nr"];
                                    if (i) {
                                        n.push(i)
                                    }
                                }
                                return n
                            }
                            return r.from(e)
                        }})
                }

Jietu20201201-093832

chenyulun commented 3 years ago

I now have slotChildNodesFix:false in my configuration, I think this fix should determine whether the browser has native methods to determine whether or not it is fixed

chenyulun commented 3 years ago

chrome39index-3187e9a7.system.js ``

if (n.$flags$&8) { // if  n.$flags === 9
                    var t = e.__lookupGetter__("childNodes"); // t = undefined
                    Object.defineProperty(e, "children", {get: function() {
                            return this.childNodes.map((function(e) {
                                return e.nodeType === 1
                            }))
                        }});
                    Object.defineProperty(e, "childElementCount", {get: function() {
                            return e.children.length
                        }});
                    Object.defineProperty(e, "childNodes", {get: function() {
                            var e = t.call(this); // error There is no ’call‘ method in undefined 
                            if ((p.$flags$ & 1) === 0 && He(this).$flags$ & 2) {
                                var n = new r;
                                for (var a = 0; a < e.length; a++) {
                                    var i = e[a]["s-nr"];
                                    if (i) {
                                        n.push(i)
                                    }
                                }
                                return n
                            }
                            return r.from(e)
                        }})
                }

Jietu20201201-093832

@adamdbradley Please help to check the problem

chenyulun commented 3 years ago

1280

chenyulun commented 3 years ago

chrome39 and chrome89 canary can cache childNodes using variables. The cache variables will change synchronously when the element changes chrome39fix chrome89childNodes

rwaskiewicz commented 2 years ago

Hey there! 👋

I'm sorry it took someone this long to get to this ticket. The Stencil team is currently only supporting Stencil 2.0+. As of Stencil 2.0, Chrome 39 is not supported. . I'm going to close this ticket, and apologize again for how long it went unacknowledged.