I've recently wanted to try more material-web-components and start coding lit in typescript however mismatched/outdated lit-element version causes mwc to not work in the ts-template.
Reproduction
Follow PWA-starter-kit getting started (for ts)
git clone --depth 1 -b template-typescript --single-branch https://github.com/Polymer/pwa-starter-kit my-app install dependencies via npm i
Install an mwc (e.g @material/mwc-dialog). Add implementation somewhere inside the app (e.g my-view1.ts).
npm run start
Result
When I try to view the my-view1 component it does not show the mwc-dialog. This is the error from the console.
This error leads me onto a wild goose chase and is largely meaningless.
Fix
After eliminating other possibilities, I found out that the issue is due to something wrong in package-lock.json
In order to fix:
delete package-lock.json
delete node_modules
run npm i
run npm run start
Root cause
@e111077 was able to identify a possible cause by suggesting to run npm ls on lit-element & lit-html
Pre-fix [mwc not working]:
lit-element
lit-html
Post-fix [mwc working]:
lit-element
lit-html
Suggestion
Keep all package-lock.json files updated or get rid of them completely from each template. This kinda random hiccup could seriously demoralize someone trying to come in and learn how to do lit. Is a package-lock.json even necessary in a template??
Big thanks to @e111077 for all your patience and help
I've recently wanted to try more material-web-components and start coding lit in typescript however mismatched/outdated lit-element version causes mwc to not work in the ts-template.
Reproduction
git clone --depth 1 -b template-typescript --single-branch https://github.com/Polymer/pwa-starter-kit my-app
install dependencies vianpm i
npm run start
Result
When I try to view the my-view1 component it does not show the mwc-dialog. This is the error from the console.![image](https://user-images.githubusercontent.com/5903821/65815564-ffb19080-e1e8-11e9-8c1f-e29e4b523782.png)
This error leads me onto a wild goose chase and is largely meaningless.
Fix
After eliminating other possibilities, I found out that the issue is due to something wrong in package-lock.json
In order to fix:
package-lock.json
node_modules
npm i
npm run start
Root cause
@e111077 was able to identify a possible cause by suggesting to run
npm ls
on lit-element & lit-htmlPre-fix [mwc not working]:![image](https://user-images.githubusercontent.com/5903821/65815803-f4139900-e1eb-11e9-83b3-15a48d9c188a.png)
lit-element
lit-html
Post-fix [mwc working]:![image](https://user-images.githubusercontent.com/5903821/65815834-3f2dac00-e1ec-11e9-8774-f293bd1a3ffc.png)
lit-element
lit-html
Suggestion
Keep all
package-lock.json
files updated or get rid of them completely from each template. This kinda random hiccup could seriously demoralize someone trying to come in and learn how to do lit. Is a package-lock.json even necessary in a template??Big thanks to @e111077 for all your patience and help