Tools: Polymer build --js-compile does not work on IE11

Created on 18 Apr 2017  路  12Comments  路  Source: Polymer/tools

Description

Route does not change on IE11;
And on my another project, without compile the page does not work on edge and makes the edge consume processor power until reach the 100%. And compiled does not work too but does not consume processor power. On chrome works perfectly.

Versions & Environment

  • Polymer CLI: v0.18
  • node: v6.10.0
  • Operating System: Windows 10 creators edition

Steps to Reproduce

Polymer init -- aplication PPRL polymer 2.0
Polymer build --js-compile
serve the build/default
open on IE11

Expected Results

The page appears normally and change the route normally

Actual Results

the route does not change

Build IE cli High Available Bug wontfix

All 12 comments

Do you have a stack trace handy? And is the version 0.18.0 and not a prerelease?

@justinfagnani sorry, my mistake. The page appears but on IE11 can't change the page route. The error on console is that:
SCRIPT445: Object doesn't support this action

I checked with polymer 1 pprl and works perfectly. The problem is only with the 2.0

And that's the extend of the stack trace? Hmm...

See the cpu usage of the internet explorer only with the polymer 2.0 pprl opened, and the error showed when click to change the route;
My laptop has an I7 last generation, so is not normal so much cpu usage.
cpu
erropolymer
the usage is always, and when click on view 2 on the drawer occurs the error

Is this Object.assign() missing or one of the methods on Array (findIndex?)?
I recently put some effort into making my app work on ie11, and had to include some such methods from Polyfill.io.

Here's the polyfill.io line I added to my index.html:

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Promise,Object.assign,Array.prototype.findIndex"></script>

worth a try, I'd say.

@davidmaxwaterman no, that does not help, continues with high cpu usage and does not work.

hrm, I wouldn't have thought it would help with the high CPU usage (unless that is a symptom of missing methods for some reason). Does it still give the same Object doesn't support this action message? It's possible it's complaining about some other method that my script line doesn't pull in a polyfill for...

Lots of the Google search results on that error message talk about polyfilling the missing methods, but some others look relevant too. I (too) wish IE would better highlight the errant part of the code, instead of a whole single line (I wonder if that is a result of minification, or is it an IE problem?).

Anyway, that's all I've got - sorry it didn't help.

@davidmaxwaterman I did again the polymer init, polymer build --js-compile
and this happen with or without the
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Promise,Object.assign,Array.prototype.findIndex"></script>
--js-compileerror

update

The cpu usage is when the IE is processing the errors, when the IE finishes of processing the errors, decreases the cpu usage and normalize.

Do you then not get the Object doesn't support this action error? It's difficult to tell from the screenshot - perhaps you could cut&paste it all here (although, it there are many duplicate lines, like there seem to be, you could replace some with ...).
I don't think the CPU usage is an issue...it's the error messages at the top of the list that would be most interesting, imo...I see IE has a 'copy all' option on the console's right mouse button menu.

Has 2 warning:

dom-module my-view1 has style outside template
dom-module shared-styles has style outside template

and 79x this

SCRIPT5022: SecurityError
javascript;charset=utf-8,
    // &lt;![CDATA[  &lt;-- For SVG support
    if (&apos;WebSocket&apos; in window) {
        (function() {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName(&quot;link&quot;));
                var head = document.getElementsByTagName(&quot;head&quot;)[0];
                for (var i = 0; i &lt; sheets.length; ++i) {
                    var elem = sheets[i];
                    head.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href &amp;&amp; typeof rel != &quot;string&quot; || rel.length == 0 || rel.toLowerCase() == &quot;stylesheet&quot;) {
                        var url = elem.href.replace(/(&amp;|\?)_cacheOverride=\d+/, &apos;&apos;);
                        elem.href = url + (url.indexOf(&apos;?&apos;) &gt;= 0 ? &apos;&amp;&apos; : &apos;?&apos;) + &apos;_cacheOverride=&apos; + (new Date().valueOf());
                    }
                    head.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === &apos;http:&apos; ? &apos;ws://&apos; : &apos;wss://&apos;;
            var address = protocol + window.location.host + window.location.pathname + &apos;/ws&apos;;
            var socket = new WebSocket(address);
            socket.onmessage = function(msg) {
                if (msg.data == &apos;reload&apos;) window.location.reload();
                else if (msg.data == &apos;refreshcss&apos;) refreshCSS();
            };
            console.log(&apos;Live reload enabled.&apos;);
        })();
    }
    // ]]&gt;

//# sourceURL=http://127.0.0.1:8080/bower_components/polymer/lib/elements/dom-module.html-1.js
 (21,4)

When click to change the route:

SCRIPT445: Object doesn't support this action
javascript;charset=utf-8,
(function () {
  &apos;use strict&apos;;

  Polymer({
    is: &apos;iron-location&apos;,

    properties: {
      /**
       * The pathname component of the URL.
       */
      path: {
        type: String,
        notify: true,
        value: function value() {
          return window.decodeURIComponent(window.location.pathname);
        }
      },

      /**
       * The query string portion of the URL.
       */
      query: {
        type: String,
        notify: true,
        value: function value() {
          return window.location.search.slice(1);
        }
      },

      /**
       * The hash component of the URL.
       */
      hash: {
        type: String,
        notify: true,
        value: function value() {
          return window.decodeURIComponent(window.location.hash.slice(1));
        }
      },

      /**
       * If the user was on a URL for less than `dwellTime` milliseconds, it
       * won&apos;t be added to the browser&apos;s history, but instead will be replaced
       * by the next entry.
       *
       * This is to prevent large numbers of entries from clogging up the user&apos;s
       * browser history. Disable by setting to a negative number.
       */
      dwellTime: {
        type: Number,
        value: 2000
      },

      /**
       * A regexp that defines the set of URLs that should be considered part
       * of this web app.
       *
       * Clicking on a link that matches this regex won&apos;t result in a full page
       * navigation, but will instead just update the URL state in place.
       *
       * This regexp is given everything after the origin in an absolute
       * URL. So to match just URLs that start with /search/ do:
       *     url-space-regex=&quot;^/search/&quot;
       *
       * @type {string|RegExp}
       */
      urlSpaceRegex: {
        type: String,
        value: &apos;&apos;
      },

      /**
       * urlSpaceRegex, but coerced into a regexp.
       *
       * @type {RegExp}
       */
      _urlSpaceRegExp: {
        computed: &apos;_makeRegExp(urlSpaceRegex)&apos;
      },

      _lastChangedAt: {
        type: Number
      },

      _initialized: {
        type: Boolean,
        value: false
      }
    },

    hostAttributes: {
      hidden: true
    },

    observers: [&apos;_updateUrl(path, query, hash)&apos;],

    attached: function attached() {
      this.listen(window, &apos;hashchange&apos;, &apos;_hashChanged&apos;);
      this.listen(window, &apos;location-changed&apos;, &apos;_urlChanged&apos;);
      this.listen(window, &apos;popstate&apos;, &apos;_urlChanged&apos;);
      this.listen( /** @type {!HTMLBodyElement} */document.body, &apos;click&apos;, &apos;_globalOnClick&apos;);
      // Give a 200ms grace period to make initial redirects without any
      // additions to the user&apos;s history.
      this._lastChangedAt = window.performance.now() - (this.dwellTime - 200);
      this._initialized = true;

      this._urlChanged();
    },

    detached: function detached() {
      this.unlisten(window, &apos;hashchange&apos;, &apos;_hashChanged&apos;);
      this.unlisten(window, &apos;location-changed&apos;, &apos;_urlChanged&apos;);
      this.unlisten(window, &apos;popstate&apos;, &apos;_urlChanged&apos;);
      this.unlisten( /** @type {!HTMLBodyElement} */document.body, &apos;click&apos;, &apos;_globalOnClick&apos;);
      this._initialized = false;
    },

    _hashChanged: function _hashChanged() {
      this.hash = window.decodeURIComponent(window.location.hash.substring(1));
    },

    _urlChanged: function _urlChanged() {
      // We want to extract all info out of the updated URL before we
      // try to write anything back into it.
      //
      // i.e. without _dontUpdateUrl we&apos;d overwrite the new path with the old
      // one when we set this.hash. Likewise for query.
      this._dontUpdateUrl = true;
      this._hashChanged();
      this.path = window.decodeURIComponent(window.location.pathname);
      this.query = window.location.search.substring(1);
      this._dontUpdateUrl = false;
      this._updateUrl();
    },

    _getUrl: function _getUrl() {
      var partiallyEncodedPath = window.encodeURI(this.path).replace(/\#/g, &apos;%23&apos;).replace(/\?/g, &apos;%3F&apos;);
      var partiallyEncodedQuery = &apos;&apos;;
      if (this.query) {
        partiallyEncodedQuery = &apos;?&apos; + this.query.replace(/\#/g, &apos;%23&apos;);
      }
      var partiallyEncodedHash = &apos;&apos;;
      if (this.hash) {
        partiallyEncodedHash = &apos;#&apos; + window.encodeURI(this.hash);
      }
      return partiallyEncodedPath + partiallyEncodedQuery + partiallyEncodedHash;
    },

    _updateUrl: function _updateUrl() {
      if (this._dontUpdateUrl || !this._initialized) {
        return;
      }

      if (this.path === window.decodeURIComponent(window.location.pathname) &amp;&amp; this.query === window.location.search.substring(1) &amp;&amp; this.hash === window.decodeURIComponent(window.location.hash.substring(1))) {
        // Nothing to do, the current URL is a representation of our properties.
        return;
      }

      var newUrl = this._getUrl();
      // Need to use a full URL in case the containing page has a base URI.
      var fullNewUrl = new URL(newUrl, window.location.protocol + &apos;//&apos; + window.location.host).href;
      var now = window.performance.now();
      var shouldReplace = this._lastChangedAt + this.dwellTime &gt; now;
      this._lastChangedAt = now;

      if (shouldReplace) {
        window.history.replaceState({}, &apos;&apos;, fullNewUrl);
      } else {
        window.history.pushState({}, &apos;&apos;, fullNewUrl);
      }

      this.fire(&apos;location-changed&apos;, {}, { node: window });
    },

    /**
     * A necessary evil so that links work as expected. Does its best to
     * bail out early if possible.
     *
     * @param {MouseEvent} event .
     */
    _globalOnClick: function _globalOnClick(event) {
      // If another event handler has stopped this event then there&apos;s nothing
      // for us to do. This can happen e.g. when there are multiple
      // iron-location elements in a page.
      if (event.defaultPrevented) {
        return;
      }

      var href = this._getSameOriginLinkHref(event);

      if (!href) {
        return;
      }

      event.preventDefault();

      // If the navigation is to the current page we shouldn&apos;t add a history
      // entry or fire a change event.
      if (href === window.location.href) {
        return;
      }

      window.history.pushState({}, &apos;&apos;, href);
      this.fire(&apos;location-changed&apos;, {}, { node: window });
    },

    /**
     * Returns the absolute URL of the link (if any) that this click event
     * is clicking on, if we can and should override the resulting full
     * page navigation. Returns null otherwise.
     *
     * @param {MouseEvent} event .
     * @return {string?} .
     */
    _getSameOriginLinkHref: function _getSameOriginLinkHref(event) {
      // We only care about left-clicks.
      if (event.button !== 0) {
        return null;
      }

      // We don&apos;t want modified clicks, where the intent is to open the page
      // in a new tab.
      if (event.metaKey || event.ctrlKey) {
        return null;
      }

      var eventPath = Polymer.dom(event).path;
      var anchor = null;

      for (var i = 0; i &lt; eventPath.length; i++) {
        var element = eventPath[i];

        if (element.tagName === &apos;A&apos; &amp;&amp; element.href) {
          anchor = element;
          break;
        }
      }

      // If there&apos;s no link there&apos;s nothing to do.
      if (!anchor) {
        return null;
      }

      // Target blank is a new tab, don&apos;t intercept.
      if (anchor.target === &apos;_blank&apos;) {
        return null;
      }

      // If the link is for an existing parent frame, don&apos;t intercept.
      if ((anchor.target === &apos;_top&apos; || anchor.target === &apos;_parent&apos;) &amp;&amp; window.top !== window) {
        return null;
      }

      var href = anchor.href;

      // It only makes sense for us to intercept same-origin navigations.
      // pushState/replaceState don&apos;t work with cross-origin links.
      var url;

      if (document.baseURI != null) {
        url = new URL(href, /** @type {string} */document.baseURI);
      } else {
        url = new URL(href);
      }

      var origin;

      // IE Polyfill
      if (window.location.origin) {
        origin = window.location.origin;
      } else {
        origin = window.location.protocol + &apos;//&apos; + window.location.hostname;

        if (window.location.port) {
          origin += &apos;:&apos; + window.location.port;
        }
      }

      if (url.origin !== origin) {
        return null;
      }

      var normalizedHref = url.pathname + url.search + url.hash;

      // If we&apos;ve been configured not to handle this url... don&apos;t handle it!
      if (this._urlSpaceRegExp &amp;&amp; !this._urlSpaceRegExp.test(normalizedHref)) {
        return null;
      }

      // Need to use a full URL in case the containing page has a base URI.
      var fullNormalizedHref = new URL(normalizedHref, window.location.href).href;
      return fullNormalizedHref;
    },

    _makeRegExp: function _makeRegExp(urlSpaceRegex) {
      return RegExp(urlSpaceRegex);
    }
  });
})();
//# sourceURL=http://127.0.0.1:8080/bower_components/iron-location/iron-location.html.js
 (262,9)

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings