Polymer / pwa-starter-kit

Starter templates for building full-featured Progressive Web Apps from web components.
https://pwa-starter-kit.polymer-project.org
2.36k stars 431 forks source link

[Question] Illegal constructor when starting 'my-app' #326

Closed amiblnde closed 5 years ago

amiblnde commented 5 years ago

[Question] Illegal constructor when starting 'my-app'

The example app cannot be started when simply following the Getting Started

$ npm --version
6.7.0
$ node --version
v10.15.0

$ mkdir temp && cd temp
$ git clone --depth 1 https://github.com/Polymer/pwa-starter-kit my-app 
# commit 30414c8317d45f1d4028b53df4f0f1318144ef5a
$ cd my-app

$ npm install
$ echo $?
0
$ npm start

Chrome Version

71.0.3578.98 (Offizieller Build) (64-Bit)

console error

Uncaught TypeError: Illegal constructor
    at CSSResult.get styleSheet [as styleSheet] (css-tag.ts:32)
    at renderRoot.adoptedStyleSheets.styles.map.s (lit-element.ts:142)
    at Array.map (<anonymous>)
    at HTMLElement.adoptStyles (lit-element.ts:142)
    at HTMLElement.initialize (lit-element.ts:95)
    at new UpdatingElement (updating-element.ts:253)
    at new LitElement (lit-element.ts:25)
    at new <anonymous> (connect-mixin.ts:52)
    at new MyApp (my-app.js:242)
    at my-app.js:282

I simply get a blank page. After that I checked the last commits and when going back before "Update lit-element to v0.7.0" (e.g. a51f4bd) the app ist starting without any error in the console.

Does anybody has a recommendation how to solve this problem? I didn't found any other similar comments regarding such fundamental problem that I assume there is something wrong on my machine. But I also checked for older versions of lit-html etc. on the machine and it looks quite clean.

Many Thanks in advance

keanulee commented 5 years ago

Hmm, can't seem to reproduce from master branch. Can you retry after getting the latest RC of lit-element?

rm -rf node_modules package-lock.json
npm i
# package-lock.json should change
npm start
frankiefu commented 5 years ago

@amiblnde Do you have experimental-web-platform-features enabled in Chrome 71? LitElement uses Constructible Stylesheets when it's available. The API in Canary (Chrome 73) is the final one and is what LitElement supports. I think the API is different/broken in Chrome 71. So either disable experimental-web-platform-features in Chrome 71 or use Canary (Chrome 73) should fix the issue.

amiblnde commented 5 years ago

@frankiefu You was absolutely right. After resetting experimental flags I was able to load the app without errors. (I don't remember that I've set them in the past...) Additionally I've installed the Canary version of Chrome and it was also working (Version 74.0.3687.0 (Offizieller Build) canary (64-Bit))

Many Thank!