Caching issue when running in device emulation mode in chrome with polymer serve

wim82 commented 7 years ago

Description

When running an app served by polymer serve under device emulation, the browser will cache the compiled ES5. If you then change the code, the app will crash - it seems it will serve the app with mismatched files/shims so the ES5-style cached code, doesn't work with the ES6 class syntax chrome expects. I lack some chrome/polymer-cli knowledge to more accurately describe the problem. According to some friendly people on the polymer 2 preview slack channel, it seemed useful to log this as an issue, though it seems hard to "fix" other than possibly highlighting in the docs? Checking "disable cache (when devtools is open)", seems to solve the issue as well. A more meaningful error message, would be super helpful for new comers like me, but seems difficult as this error is thrown by chrome (?)

Versions & Environment

Polymer CLI: 0.18.1
node:6.10.3
Operating System: macOS sierra

Steps to Reproduce

Browser: Chrome: "Disable cache when devtools is open" is left unchecked.

Create the simple start application template from the polymer-cli
polymer serve
Should load fine in the device emulation mode
Make a change in the src file
(Soft) Refresh the browser.. and the app crashes with an error

Expected Results

The app should be still visible

Actual Results

Error is thrown: "Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'".

steve-a-jones commented 7 years ago

Receiving this exact same error even when "Disable Cache" is checked.

dom-module.html:65 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at new DomModule (dom-module.html:65)
    at dom-module.html:157
    at dom-module.html:161

Chrome: Version 58.0.3029.110 (64-bit)
Polymer Version : 1.1.0

Just familiarizing myself with Polymer tooling - it seems that this issue is already being addressed here as has to do with es5 transpilation: https://github.com/Polymer/polyserve/issues/162

Passing --compile never to polymer serve appears to help - although i've found the error above is not consistent and feels a lot like a race condition.

pdesjardins90 commented 7 years ago

From the docs:

Device emulation may cause errors. When using DevTools device emulation in Chrome, polymer serve will serve compiled code when emulating iOS devices, and uncompiled code when emulating Android devices. When switching between devices, the browser may end up with both compiled and uncompiled code in its cache, resulting in errors. To avoid this problem, run polymer serve with the --compile never option when testing with device emulation.

I wonder why ES6 code gets compiled to ES5 by default on iOS since WebKit fully implemented ES6 before Chrome? And also, it's possible for an iOS device to use Chrome instead of Safari, so why the weird default behavior here?

davidmaxwaterman commented 7 years ago

Small point: doesn't Chrome on iOS just use the same internals as Safari on iOS? If so, then they should be treated the same. I'm not sure about the support of es2015...that sounds like a good question.

stale[bot] commented 4 years ago

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.

Polymer / tools