search

Polymer / polymer

Our original Web Component library.
https://polymer-library.polymer-project.org/
BSD 3-Clause "New" or "Revised" License
22.03k stars 2.02k forks source link

Polymer 2.0 not work on IE11. SCRIPT1003 #4682

Closed manujoz closed 7 years ago

manujoz commented 7 years ago

I am trying to run Polymer 2.0 in IE11 and i allways get the same error:

image

I instal Polymer 2.0 and anything more and a create the follow document.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <title></title>
    </head>
    <body>
        HOLA
    </body>
</html>

I tried using differents polyfills with the same result. In Polymer Web Page you can read browser supports and IE11+ is supported, so, why i can´t load the Polymer?

Steps to Reproduce

  1. Install Polymer
  2. Create a simple HTML document inserting Polymer
  3. Load the HTML document in IE11

Browsers Affected

Version

Sorry for my english.

iSuslov commented 7 years ago

Does it work in chrome? I'm not sure you have to import polymer.html itself inside index.html Try installing polymer-cli and generating simple application.

arthurevans commented 7 years ago

To run on IE11, you need to transpile Polymer (and any elements you're using) to ES5.

If you use polymer serve as a development server, it should transpile your code automatically for IE.

For regular deployment, you're going to want to transpile your code. polymer build will do this for you if you use the es5-bundled preset.

For example:

polymer build --preset es5-bundled

Or configure this in your polymer.json file:

builds: [{
  "preset": "es5-bundled" 
]

... Then you can just run:

polymer build

With no arguments.

Related docs:

Browser support overview: https://www.polymer-project.org/2.0/docs/browsers ES6: https://www.polymer-project.org/2.0/docs/es6 Build for production: https://www.polymer-project.org/2.0/toolbox/build-for-production

david-shams commented 7 years ago

I have the same issue. Used polymer cli to create a PRPL application skeleton and it works in Chrome but does not work in IE11. Apps created with Polymer 1.0 cli were working in IE11

web-padawan commented 7 years ago

Using polymer serve transpiles your code to ES5 on the fly, if you use another dev server, you have to run polymer build.

Polymer 1.x is written with ES5, but Polymer 2 uses ES2015, which is not supported by IE without transpilation.

manujoz commented 7 years ago

Mr. @arthurevans is right. I got it working on IE11 with polymer build.

You have all the documentation arthurevans's comment.

Thank you so much.

woisme commented 7 years ago

Same issue with mine but it also does not work with iPhone 6 Safari.

Configured the builds as per @arthurevans

"builds": [ { "preset": "es5-bundled" } ]

Used polymer build

Now I have this on IE11 on Windows 10.

screenshot 2017-06-17 15 16 24

manujoz commented 7 years ago

@woisme I cofigured my json on this way:

{
    "lint": {
        "rules": [
        "polymer-2"
        ]
    },
    "sources": [
        "bower_components/**/*",
        "my_components/**/*"
    ],
    "builds": [{
        "name": "es5",
        "js": {"minify": true, "compile": true},
        "css": {"minify": true},
        "html": {"minify": true},
        "addServiceWorker": false,
        "insertPrefetchLinks": false
    }]
}

In the build folder I have all polymer and components transpilated. It is these files that you must to use.

After in the HTML or PHP file where you import Polymer you must do that


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
<title>prueba</title>
<meta name="description" content="Hola prueba">
<link rel="manifest" href="/manifest.json">

<script>!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);</script>

<script>if (!window.customElements) { document.write('<!--'); }</script>
<script type="text/javascript" src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!--! do not remove -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">

<link rel="import" href="/my_components/my-component/my-component.html">
</head>

<body>

</body>
</html>

That work for me. But I created the same configuration a little more elegant way:

webcomponents-personal.js


!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);
(function() {
    if ( window.customElements ) {
        var script = "script";

        document.write( '<' + script + ' src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></' + script + '>' );
    }
})();

index.php


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
<title>prueba</title>
<meta name="description" content="Hola prueba">
<link rel="manifest" href="/manifest.json">

<script src="/bower_components/webcomponentsjs/webcomponents-personal.js"></script>
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">

<link rel="import" href="/my_components/my-component/my-component.html">
</head>

<body>

</body>
</html>

Again, sorry for my english.

woisme commented 7 years ago

Thank you for that @arismanwebs. But still the same result.

manujoz commented 7 years ago

Can u write the code of you index.html?? @woisme

woisme commented 7 years ago 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="generator" content="Lamorna Wink">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
    <title>Lamorna Wink</title>
    <meta name="description" content="Lamorna Pub and Restaurant">
    <base href="/">
    <link rel="icon" href="images/favicon.ico">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#3f51b5">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Lamorna Wink">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Lamorna Wink">
    <link rel="apple-touch-icon" href="images/manifest/icon-48x48.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/manifest/icon-72x72.png">
    <link rel="apple-touch-icon" sizes="96x96" href="images/manifest/icon-96x96.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/manifest/icon-144x144.png">
    <link rel="apple-touch-icon" sizes="192x192" href="images/manifest/icon-192x192.png">
    <meta name="msapplication-TileImage" content="images/manifest/icon-144x144.png">
    <meta name="msapplication-TileColor" content="#3f51b5">
    <meta name="msapplication-tap-highlight" content="no">

    <script>
        ! function(e) {
            var r = e.babelHelpers = {};
            r.typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
                return typeof e
            } : function(e) {
                return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
            }, r.classCallCheck = function(e, r) {
                if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function")
            }, r.createClass = function() {
                function e(e, r) {
                    for (var t = 0; t < r.length; t++) {
                        var n = r[t];
                        n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(e, n.key, n)
                    }
                }
                return function(r, t, n) {
                    return t && e(r.prototype, t), n && e(r, n), r
                }
            }(), r.defineEnumerableProperties = function(e, r) {
                for (var t in r) {
                    var n = r[t];
                    n.configurable = n.enumerable = !0, "value" in n && (n.writable = !0), Object.defineProperty(e, t, n)
                }
                return e
            }, r.defaults = function(e, r) {
                for (var t = Object.getOwnPropertyNames(r), n = 0; n < t.length; n++) {
                    var o = t[n],
                        i = Object.getOwnPropertyDescriptor(r, o);
                    i && i.configurable && void 0 === e[o] && Object.defineProperty(e, o, i)
                }
                return e
            }, r.defineProperty = function(e, r, t) {
                return r in e ? Object.defineProperty(e, r, {
                    value: t,
                    enumerable: !0,
                    configurable: !0,
                    writable: !0
                }) : e[r] = t, e
            }, r.extends = Object.assign || function(e) {
                for (var r = 1; r < arguments.length; r++) {
                    var t = arguments[r];
                    for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n])
                }
                return e
            }, r.get = function e(r, t, n) {
                null === r && (r = Function.prototype);
                var o = Object.getOwnPropertyDescriptor(r, t);
                if (void 0 === o) {
                    var i = Object.getPrototypeOf(r);
                    return null === i ? void 0 : e(i, t, n)
                }
                if ("value" in o) return o.value;
                var a = o.get;
                if (void 0 !== a) return a.call(n)
            }, r.inherits = function(e, r) {
                if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function, not " + typeof r);
                e.prototype = Object.create(r && r.prototype, {
                    constructor: {
                        value: e,
                        enumerable: !1,
                        writable: !0,
                        configurable: !0
                    }
                }), r && (Object.setPrototypeOf ? Object.setPrototypeOf(e, r) : e.__proto__ = r)
            }, r.instanceof = function(e, r) {
                return null != r && "undefined" != typeof Symbol && r[Symbol.hasInstance] ? r[Symbol.hasInstance](e) : e instanceof r
            }, r.newArrowCheck = function(e, r) {
                if (e !== r) throw new TypeError("Cannot instantiate an arrow function")
            }, r.objectDestructuringEmpty = function(e) {
                if (null == e) throw new TypeError("Cannot destructure undefined")
            }, r.objectWithoutProperties = function(e, r) {
                var t = {};
                for (var n in e) r.indexOf(n) >= 0 || Object.prototype.hasOwnProperty.call(e, n) && (t[n] = e[n]);
                return t
            }, r.possibleConstructorReturn = function(e, r) {
                if (!e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
                return !r || "object" != typeof r && "function" != typeof r ? e : r
            }, r.set = function e(r, t, n, o) {
                var i = Object.getOwnPropertyDescriptor(r, t);
                if (void 0 === i) {
                    var a = Object.getPrototypeOf(r);
                    null !== a && e(a, t, n, o)
                } else if ("value" in i && i.writable) i.value = n;
                else {
                    var u = i.set;
                    void 0 !== u && u.call(o, n)
                }
                return n
            }, r.slicedToArray = function() {
                function e(e, r) {
                    var t = [],
                        n = !0,
                        o = !1,
                        i = void 0;
                    try {
                        for (var a, u = e[Symbol.iterator](); !(n = (a = u.next()).done) && (t.push(a.value), !r || t.length !== r); n = !0);
                    } catch (e) {
                        o = !0, i = e
                    } finally {
                        try {
                            !n && u.return && u.return()
                        } finally {
                            if (o) throw i
                        }
                    }
                    return t
                }
                return function(r, t) {
                    if (Array.isArray(r)) return r;
                    if (Symbol.iterator in Object(r)) return e(r, t);
                    throw new TypeError("Invalid attempt to destructure non-iterable instance")
                }
            }(), r.taggedTemplateLiteral = function(e, r) {
                return Object.freeze(Object.defineProperties(e, {
                    raw: {
                        value: Object.freeze(r)
                    }
                }))
            }, r.temporalRef = function(e, r, t) {
                if (e === t) throw new ReferenceError(r + " is not defined - temporal dead zone");
                return e
            }, r.temporalUndefined = {}, r.toArray = function(e) {
                return Array.isArray(e) ? e : Array.from(e)
            }, r.toConsumableArray = function(e) {
                if (Array.isArray(e)) {
                    for (var r = 0, t = Array(e.length); r < e.length; r++) t[r] = e[r];
                    return t
                }
                return Array.from(e)
            }
        }("undefined" == typeof global ? self : global);
    </script>

    <script>
        var baseUrl = document.querySelector('base').href;
        'serviceWorker' in navigator && window.addEventListener('load', function() {
            navigator.serviceWorker.register(baseUrl + 'service-worker.js')
        });
    </script>
    <script>
        if (!window.customElements) {
            document.write('<!--');
        }
    </script>
    <script type="text/javascript" src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
    <!--! do not remove -->
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">

    <link rel="import" href="src/my-app.html">
    <style>
        body {
            margin: 0;
            font-family: 'Roboto', 'Noto', sans-serif;
            line-height: 1.5;
            min-height: 100vh;
            background-color: #eeeeee;
        }
    </style>
</head>

<body>
    <my-app></my-app><noscript>Please enable JavaScript to view this website.</noscript></body>

</html>