Tools: polymer serve breaks my app when I use the toggle device button in Chrome dev tools

[dfreedm]

_From @jkhoffman on March 10, 2017 4:24_

Description

I load my app. It runs fine. I open Chrome dev tools and use the "Toggle device" toolbar button to switch to iPhone 6 emulation mode. I hard refresh and my app breaks.

Under the hood, my code is being transpiled by polymer serve when in iPhone emulation mode. When I turn off iPhone emulation and refresh, I get pure ES6.

The transpilation breaks, giving me a bunch of console errors like this:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at CmApp.PropertyAccessors (property-accessors.html:126)
    at CmApp.TemplateStamp (template-stamp.html:461)
    at CmApp.PropertyEffects (property-effects.html:1212)
    at CmApp.PolymerElement (element-mixin.html:548)
    at new CmApp (cm-app.html:112)
    at cm-app.html:171

I think I found the root cause. When iPhone mode is active, here is the UA request header:

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1

and when I toggle back to normal view:

User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36

Polymer serve handles the latter correctly, but is somehow mishandling the former.

Live Demo

Any Polymer 2.0 RC project will do.

Steps to Reproduce

1. Run polymer serve
2. Load the url in Chrome.
3. Open dev tools.
4. Using the button in the toolbar, toggle to iPhone 6 emulation mode.
5. Refresh. (I "Empty Cache and Hard Reset", not sure if it matters.)
6. Watch your app break.

Expected Results

I (naïvely?) expected it to work the same whether I toggled iPhone view on or off. I didn't realize that was changing my user agent. Beyond that, I didn't expect that was the root cause of 17 uncaught exceptions on my console. Spent hours thinking there was a typo in my code, lol.

Actual Results

Broken transpilation when using Chrome dev tools' iPhone emulation.

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 9
• [ ] Safari 8
• [ ] IE 11

Only tested in Chrome, sorry.

Versions

• Polymer: v0.18.0-pre.13
• webcomponents: v1.0.0-rc.5

cc @justinfagnani

_Copied from original issue: Polymer/polymer#4406_

[justinfagnani]

@usergenic could you check this one out? There's the UA handling code here: https://github.com/Polymer/polyserve/blob/master/src/compile-middleware.ts#L144

[usergenic]

Looking into this now

[usergenic]

The User-Agent handling code is correct. I went and added tests to verify that https://github.com/Polymer/polyserve/pull/163

You'll get the same problem right now if you say polyserve --compile always and try to run in Chrome without pretending to be an iPhone.

The solution for now is to run polyserve --compile never if you want to test the iPhone layout. Chrome sends the right user agent, but it doesn't actually behave like an iPhone. It's still being Chrome and still doesn't like the compiled output.

As for why Chrome doesn't like the compiled version, I don't have the full scoop on that available.

[usergenic]

If you're interested in why you can't test the ES5 compiled code in Chrome right now: https://github.com/webcomponents/webcomponentsjs/issues/737

[FredKSchott]

^^^ compiled code in Chrome should be fixed now

[jkhoffman]

Sweetness!

[stale[bot]]

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.