inserted by polymer build / polymer serve causes warning in IE11, and result in blank polymer-2-starter-kit #2465

LawrenceMok · 2017-06-01T13:06:50Z

what I did:
polymer init
select polymer-2-starter-kit
polymer serve
open the site in IE11, got a completely blank page, console shows these warnings:

HTML1414: Unexpected character: U+0021 EXCLAMATION MARK (!)
127.0.0.1:8081 (67,9)
HTML1416: Unexpected character in comment end. Expected "-->".
127.0.0.1:8081 (67,10)

Also after around 10 seconds, got this error:
SCRIPT445: Object doesn't support this action
CustomElementInternals.js (255,7)

view source showing line 67 as:


which should be inserted by polymer build / polymer serve

The text was updated successfully, but these errors were encountered:

colincannon-acp · 2017-06-01T13:54:54Z

Please help with this, as far as I can tell Polymer 2 does not work at all with ie11 after being built.

I removed the line

<!--! do not remove -->

After building and the original error was gone, but a different error popped up complaining about an unexpected end of file, and the page still did not display in the browser.

Also, I am getting the same error messages and problems in EDGE.

stramel · 2017-06-01T16:33:53Z

I was able to reproduce this as well. Although, I believe this issue would be better off being in the PSK repository.

Versions & Environment

Polymer CLI: 1.1.0
node: 6.9.1
Operating System: Windows 10

Steps to Reproduce

Install polymer-cli (`npm i -g polymer-cli)
Create a directory for the app and change to that directory (mkdir test && cd test)
Initialize polymer-2-starter-kit (polymer init polymer-2-starter-kit)
Serve app (polymer serve -o)

Expected Results

App loads successfully in all supported browsers

Actual Results

App fails to load in IE11. Also, throws warnings in IE and Edge.

Browsers Affected

Console Output

Edge:

IE11:

FredKSchott · 2017-06-08T22:12:20Z

Hmm, okay we'll need to make time to dig in to why this is happening.

usergenic · 2017-06-12T22:29:54Z

Just updated bundler to preserve <!--! comments incidentally in Polymer/polymer-bundler#546

ghost · 2017-06-23T08:51:35Z

Not even a quick workaround, just for the time being???

cgriffin4 · 2017-06-23T17:35:48Z

@andreabioli - I was able to get my page to work after a few hours of fiddling with things but unfortunately I don't remember exactly what I did. Sorry, and good luck.

I know I tried straight up editing the index file and couldn't get things working, tried using different versions of webcomponentsjs and didn't have any success. Then I uninstalled polymer-cli completely. Installed the newest version of polymer-bundler and then reinstalled polymer-cli. I think I also made some changes to the index file and my-app file but I'm not sure which of those changes were related to getting things working again.

As a side note, this kind of timeline on bugs which break Polymer-Cli on windows or IE/Edge really has me hesitant to ever upgrade after finding a working version and worried about the future use of polymer at my workplace.

ghost · 2017-06-23T18:38:34Z

...your last sentence is really scaring, but I think it's honestly objective.
I got to love Polymer approach, clean and modern: we are developing a test project here where I work now, but very often I get puzzled by these things...
It will be really a nightmare, if a different version of just one single component can break everything so easily... :-(

justinfagnani · 2017-06-23T19:25:48Z

I tried reproducing just the comment warning with the following jsbin in IE11, but couldn't: https://jsbin.com/kiditugizo/edit?html,output

And from reading this page: https://msdn.microsoft.com/en-us/library/hh180764(v=vs.85).aspx I don't think that warning should break the page. It might be two different things.

stramel · 2017-06-23T19:36:21Z

@justinfagnani I was noticing it today still on PSK#2.0-preview.

cgriffin4 · 2017-06-23T20:28:11Z

It will be really a nightmare, if a different version of just one single component can break everything so easily...

@andreabioli - It's not all that doom and gloom. For the most part versions between components work extremely well. The only issue I've seen has been updates/releases to new dev/build tools tend to have more bugs (sometimes crippling ones) in Windows OS/browsers. Polymer library and polymer components have been solid for the most part. That said, the tools are improving all the time and it's just generally not a good idea to immediately update production build tools so just take best practices and you'll be good.

For this issue it was certainly more than just the comment but it was how the build tool output the index file, specifically the section with the es5-custom-adapter.

That said, with the latest version of PSK (2.0-preview), version 1.2 of Polymer-Cli, and 1.5.1 of Polymer-Build I DO NOT see the problem any longer. @stramel - Could you provide versions or code where it is still an issue?

ghost · 2017-06-23T20:42:26Z

You are right, sorry for having a moment of bad mood, but in the afternoon I had another big problem just trying to use iron-validator-behavior (still in 'old mode') in Polymer 2: I filed the problem, and I already saw I'm not the only one... These things don't help to consider the whole approach in a very positive way, but I'm confident that you can progress through all of this! :-)
Moreover, it's never a good think to criticize the (strong) efforts of other people, so sorry also for this!

rpapeters · 2017-06-23T21:12:16Z

Just checked with polymer-cli 1.2 on a Windows system and IE11; still having the same issue, so for me it is not resolved yet. (Also tried building using git bash). Sadly IE11 still must be supported so this is really a showstopper. Hope you are able to figure out what's going wrong, good luck! Regards, Rob Update: I did notice that the polymer-2-application (the simple template) DOES work in IE11.

cgriffin4 · 2017-06-23T22:09:27Z

@rpapeters I'd check your version of polymer-build and download a fresh psk preview 2. Hopefully you'll notice one of those has been updated and it'll narrow down where your issue is. Good luck

ghost · 2017-06-27T08:15:52Z

I made further tests.
I see for example that only in the case of IE11 and Edge there is an incredible high CPU activity before serving the page (is it normal in IE and Edge, or is it only for Polymer applications? I don't know...), and then, beyond the warnings, that as someone else said, maybe don't have an impact on displaying the page, these are the errors I get:

SCRIPT438: Object doesn't support property or method 'call'
patch-events.js (353,7)
SCRIPT445: Object doesn't support this action
CustomElementInternals.js (255,7)

That are probably the real responsible for NOT showing the page at all, in the end...
To note that the second error always happens, the first only sometimes... just to add more strangeness...

bkawk · 2017-06-27T08:31:52Z

I too have the same issue you can see it at https://www.bkawk.com

ghost · 2017-06-27T08:33:47Z

I can add even more: The class defined in CustomElementInternals.js is CustomElementRegistry, that at this page, https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry, is said to be NOT supported in Internet Explorer.
I'm starting to suspect something... :-(
Tracing the code, the problem is (probably) that in that class, the function _flush() is called with an internal variable (this._internals, line 142 of the file I have) that is undefined, and it's trying to call this._internals.patchAndUpgradeTree(document), that obviously can only fail...

ghost · 2017-06-27T08:51:58Z

Now I tried to jump over the offending line (CustomElementRegistry.js, line 142, this._internals.patchAndUpgradeTree(document);), and now I have no errors, only the warnings, but the page is totally blank, it looks like Polymer is not initialized at all...

ghost · 2017-06-27T11:16:07Z

...and if we run the validator on bkawk page:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.bkawk.com
We see a couple of minor errors, and then, this time NOT marked as a warning, an error regarding the famous/infamous line with the comment...

ghost · 2017-07-03T09:08:04Z

What worries me is this: nobody in the world can deliver at the moment a Polymer 2 application that works on IE???
Is there any update on this' High priority' bug? I'm really worried, now, because we have to go in production before the end of the month, and the reference browser is just IE! :-(
Sorry for asking...

rpapeters · 2017-07-03T09:31:08Z

I feel your pain. We had to convince the customer to use an alternative browser while IE is their standard. Luckily for us they where prepared to do so, but this is NOT a good selling point... In a business perspective, the Polymer team should be on top of this, because (I think) many companies are still using (the crappy) IE browser. Although I really love building Polymer (2) apps and strongly believe it is the right way to go, I can't say it should be marked as production ready untill the IE problem is fixed. So, go go Polymer team! Keep up the good work! Regards, Rob Peters

ghost · 2017-07-03T10:04:26Z

For me it's just a no point: I pushed to use Polymer, in this application, that will be run all over the world. Big numbers, in this, I cannot ask such a big company to make such a move (change browser!) just because of my (small) application... :-(((

HughxDev · 2017-07-03T11:56:17Z

I agree with @cgriffin4 and @andreabioli. This issue is blocking an app launch for my client, which is costing me time/money/reputation. And yeah, I saved IE testing till the end, which was a misstep, but Polymer says it supports IE11+, so I was overly confident that any IE-specific issues would be minor; not something like the entire app failing to load. I can’t even get things to work by side-stepping the cli with a custom gulp build that basically just does crisper and babel. It looks like I’m going to have to spend time downgrading the app to Polymer 1.9, since a previous 1.x project loads fine in IE. This honestly makes me reconsider using the library in production environments. I would expect this kind of error from a beta, but not a 2.0 release.

ghost · 2017-07-03T13:19:23Z

Just the same steps I did, @hguiney! :-) I'm still telling the customer 'don't worry, test it in Chrome, and when we go in production we will have the compatibility', but now I must prepare to downgrade to Polymer 1.x... :-(
Really not a good thing... :-(

ghost · 2017-07-04T16:38:32Z

I had some hopes when I saw there was a new version of Polymer CLI.
Unfortunately, I could quickly realize that even with Polymer CLI 1.3.0 this problem is still totally there... :-(

ghost · 2017-07-05T15:00:10Z

I FOUND THE PROBLEM!!!
After a lot of research, I saw that the 'Shop' Polymer 2 Application is working in IE, so I starting 'disassembling' that application, inserting my own code (and the needed code from what was generated by the starter kit (or CLI, whatever... you know...)
In the end it came out that in the my-app custom element the app-route is defined as follows:

    <app-route
        route="{{route}}"
        pattern="[[rootPattern]]:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

Where the rootPattern variable is initialized like this:

      constructor() {
        super();

        // Get root pattern for app-route, for more info about `rootPath` see:
        // https://www.polymer-project.org/2.0/docs/upgrade#urls-in-templates
        this.rootPattern = (new URL(this.rootPath)).pathname;
      }

But the URL object is not compatible with IE (11), as we can see from this page:

https://caniuse.com/#search=url

And it blows up everything, in a very strange way, that's not easy to spot.
So now I changed the route as in:

<app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route>

Without the variable at all, of course removing the offending line! And it works without any problem, in any browser...

Do I deserve a prize, for one full day of tests? :-)

P.S.: now I'm curious... Please, could the other users check to see if this solve the problem?

ghost · 2017-07-05T15:09:49Z

And in this official page:
https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
They explicitly say that 'This is an experimental technology', and even in this page it's stated that this is NOT supported in IE11.
Using this class in a generic and global code generator is really a little bit crazy! :-))))))))))))))

krumware · 2017-07-05T15:19:36Z

related issue: Polymer/polymer-starter-kit#1020

I'm a bystander in this one, but I'm guessing the version of the PSK which is pulled by the current polymer-cli is not the most up-to-date

jsilvermist · 2017-07-05T15:19:42Z

@andreabioli This is already fixed in the latest PSK branches, and will probably be released as soon as lazy-imports are finalized and implemented in the PSK.

A URL polyfill used to be shipped with webcomponents.js v0 but was removed in the v1 version, hence the confusion and issue with IE11.

ghost · 2017-07-05T15:25:19Z

I perfectly understand that errors happen, of course, anytime, anywhere... in this case, whatever the reason, you have to admit that it's really strange, that a whole team released such a giant error, and noone in testing realized this...
Anyway, apart from the full day of craziness I spent on this, I'm happy that in the end I could spot it! Only this! :-)
P.S.: by the way, I couldn't find the #1020 mentioned by @krumware :-( Someone could post the reference here! :-)

stramel · 2017-07-05T15:56:57Z

@jsilvermist working on getting documentation, perf profiling, and some fixes into the repo before we merge and tag.

Also, I think this should be closed since it IE11 and Edge just warn about the comment. Using the RegExp should fix the failing load on IE11.

rpapeters · 2017-07-12T10:43:05Z

Just updated polymer-cli to 1.3.1 and generated a fresh polymer-2-starter-kit app. Still seeing the same issue:

schlm3 · 2017-07-12T11:20:16Z

Same here. Discovered this in 1.1.0 already and its still there in 1.3.1.
However, I can not see any negative impact on our polymer-1 application in IE except for the warning in the console.
Of course it is pretty awkward, that google improves the polymer-linter to check for correct syntax and at the same time introduces illegal syntax during build...

ghost · 2017-07-12T11:31:13Z

Yes, Polymer 1... we were talking about the Polymer 2 starter kit, where you cannot even see the first page, screen in IE remains blank...

krumware · 2017-07-13T16:55:31Z

@unionthugface iron-ajax now requires the promise polyfill instead of including it. Check out the iron-ajax repo PolymerElements/iron-ajax#280

moodyjmz · 2017-07-14T09:21:07Z

bower_components/shadycss/src/style-properties.js - I can see this being delivered as ES6 into IE11

And CustomElementInternals.js - which seems to be dynamically generated by polymer serve

This is cli v1.3.1

JoceM · 2017-07-24T14:44:24Z

Is there any updates about this ? This is pretty critical and strangely not widely discussed anywhere else. Folks reverting to Polymer 1 ?

stramel · 2017-07-24T14:57:47Z

This has been come a catch all issue and should be closed as the root issue has been addressed. The fix for the original issue is to switch from using new URL to a regex based lookup as pointed out here Polymer/polymer-starter-kit#1020.

@FredKSchott @abdonrd @LawrenceMok Can we close this?

rpapeters · 2017-07-24T15:03:04Z

This fix is not yet available in the polymer-cli, or is it? If not, how could we already use this polymer-starter-kit fix inside polymer-cli?

stramel · 2017-07-24T15:16:50Z

polymer-cli master seems to be pulling the ^3.0.0 version of PSK. Which appears to not to have the latest tagged yet. So maybe this stays open until it is tagged? Follow status of tag here: Polymer/polymer-starter-kit#1038

@abdonrd @justinfagnani

abdonrd · 2017-07-24T15:26:21Z

@stramel @rpapeters The problem is solved, but now we have to wait for a new PSK release. The Polymer CLI doesn't need to be updated, because it takes the last PSK tag.

rpapeters · 2017-07-24T15:33:01Z

Thx for the update, glad to hear the problem should be solved! Can’t we manually override the PSK tag that polymer-cli uses? Or manually install a different PSK version and let polymer-cli use that specific version?

abdonrd · 2017-07-24T15:35:59Z

@rpapeters you can download the PSK 2.0-preview branch.

rpapeters · 2017-07-24T15:42:50Z

Sorry for asking, which folder should the files go to, so polymer-cli wil make use of it? Somewhere into the node_modules?

abdonrd · 2017-07-24T15:48:41Z

@rpapeters No, I mean direct download:

https://github.com/PolymerElements/polymer-starter-kit/archive/2.0-preview.zip

Instead of:

polymer init polymer-2-starter-kit

rpapeters · 2017-07-24T15:50:08Z

Ok, clear. Thx! Update: 'polymer serve' is working! 'polymer build --preset es5-bundled' is not working... ![image](https://user-images.githubusercontent.com/3110138/28613549-f0891906-71f2-11e7-9510-29fae65b3017.png) Update2: 'polymer build --js-compile --js-minify --css-minify --bundle --add-service-worker' IS WORKING! I think --html-minify is breaking the build at the moment, because when I add that parameter it is not working.

motss · 2017-07-26T16:32:39Z

No luck in getting it serve without any issue on IE11. Edge was fine.

abdonrd · 2017-07-26T16:34:02Z

Released Polymer Starter Kit v3.1.0! 😄

stramel · 2017-07-26T16:53:49Z

Hooray!

rpapeters · 2017-07-26T18:34:03Z

Awesome!

phun-ky · 2017-08-22T09:21:54Z

Still getting this issue in IE11 11.540.15063.0

ralcar · 2017-08-23T23:51:26Z

Same here, updated to the latest Polymer CLI, created a fresh PSK 2 with PRPL pattern. Built to es5-bundled, and pushed it to a firebase hosting with firebase-tools.

Runs fine in chrome/firefox, but IE and Edge doesnt load. IE loads the app shell sometimes, but also takes a really long time before even showing anything.

adamdoyle · 2018-12-19T20:20:25Z

If it helps, the exclamation mark warning issue is not with the  alone, but with the combination of both of the following:

<script>
if (!window.customElements) {
  document.write('<!--');
}
</script>
<!--! do not remove -->

In the case that window.customElements is undefined (e.g. on IE11 or Edge[?]), the resultant HTML is:

<!-- <!--! do not remove -->

(even the syntax highlighter isn't happy about it)

That comment-inside-a-comment violates §8.1.6(2) of the HTML5 Specification:

§8.1.6: Comments

Comments must have the following format:

The string ""

Note:
The text is allowed to end with the string "<!", as in .

Here are three pages on Glitch demonstrating the different parts of the problem:

No warnings: Only the  (view in browser / edit)
Warnings: The script that adds the  (view in browser / edit)
Warnings: The resultant bad HTML, hardcoded without Javascript (view in browser / edit)

It seems IE variants emit a warning, but Chrome stays silent. (even when it's hardcoded, as in example 3, above)

adamdoyle · 2018-12-19T20:49:58Z

If it can use Javascript to insert the opening comment, is there a reason it can't just use the Javascript to insert the entire <script> tag?

stale · 2020-03-03T13:16:12Z

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.

aomarks transferred this issue from Polymer/polymer-cli Jan 3, 2019

aomarks added Package: cli Priority: High Status: Available Type: Bug labels Jan 3, 2019

stale bot added the wontfix label Mar 3, 2020

inserted by polymer build / polymer serve causes warning in IE11, and result in blank polymer-2-starter-kit #2465

inserted by polymer build / polymer serve causes warning in IE11, and result in blank polymer-2-starter-kit #2465

Comments

LawrenceMok commented Jun 1, 2017

colincannon-acp commented Jun 1, 2017 • edited Loading

stramel commented Jun 1, 2017 • edited Loading

Versions & Environment

Steps to Reproduce

Expected Results

Actual Results

Browsers Affected

Console Output

FredKSchott commented Jun 8, 2017

usergenic commented Jun 12, 2017

ghost commented Jun 23, 2017

cgriffin4 commented Jun 23, 2017

ghost commented Jun 23, 2017

justinfagnani commented Jun 23, 2017

stramel commented Jun 23, 2017 • edited Loading

cgriffin4 commented Jun 23, 2017

ghost commented Jun 23, 2017 • edited by ghost Loading

rpapeters commented Jun 23, 2017 via email • edited Loading

cgriffin4 commented Jun 23, 2017

ghost commented Jun 27, 2017 • edited by ghost Loading

bkawk commented Jun 27, 2017

ghost commented Jun 27, 2017

ghost commented Jun 27, 2017

ghost commented Jun 27, 2017

ghost commented Jul 3, 2017

rpapeters commented Jul 3, 2017 via email • edited Loading

ghost commented Jul 3, 2017

HughxDev commented Jul 3, 2017 • edited Loading

ghost commented Jul 3, 2017

ghost commented Jul 4, 2017

ghost commented Jul 5, 2017 • edited by ghost Loading

ghost commented Jul 5, 2017

krumware commented Jul 5, 2017

jsilvermist commented Jul 5, 2017 • edited Loading

ghost commented Jul 5, 2017 • edited by ghost Loading

stramel commented Jul 5, 2017 • edited Loading

rpapeters commented Jul 12, 2017

schlm3 commented Jul 12, 2017

ghost commented Jul 12, 2017

krumware commented Jul 13, 2017

moodyjmz commented Jul 14, 2017

JoceM commented Jul 24, 2017

stramel commented Jul 24, 2017

rpapeters commented Jul 24, 2017 via email • edited Loading

stramel commented Jul 24, 2017

abdonrd commented Jul 24, 2017

rpapeters commented Jul 24, 2017 via email • edited Loading

abdonrd commented Jul 24, 2017

rpapeters commented Jul 24, 2017 via email • edited Loading

abdonrd commented Jul 24, 2017

rpapeters commented Jul 24, 2017 via email • edited Loading

motss commented Jul 26, 2017

abdonrd commented Jul 26, 2017

stramel commented Jul 26, 2017

rpapeters commented Jul 26, 2017 via email

phun-ky commented Aug 22, 2017

ralcar commented Aug 23, 2017

adamdoyle commented Dec 19, 2018 • edited Loading

adamdoyle commented Dec 19, 2018

stale bot commented Mar 3, 2020

colincannon-acp commented Jun 1, 2017 •

edited

Loading

stramel commented Jun 1, 2017 •

edited

Loading

stramel commented Jun 23, 2017 •

edited

Loading

ghost commented Jun 23, 2017 •

edited by ghost

Loading

rpapeters commented Jun 23, 2017 via email •

edited

Loading

ghost commented Jun 27, 2017 •

edited by ghost

Loading

rpapeters commented Jul 3, 2017 via email •

edited

Loading

HughxDev commented Jul 3, 2017 •

edited

Loading

ghost commented Jul 5, 2017 •

edited by ghost

Loading

jsilvermist commented Jul 5, 2017 •

edited

Loading

ghost commented Jul 5, 2017 •

edited by ghost

Loading

stramel commented Jul 5, 2017 •

edited

Loading

rpapeters commented Jul 24, 2017 via email •

edited

Loading

rpapeters commented Jul 24, 2017 via email •

edited

Loading

rpapeters commented Jul 24, 2017 via email •

edited

Loading

rpapeters commented Jul 24, 2017 via email •

edited

Loading

adamdoyle commented Dec 19, 2018 •

edited

Loading