Outdated package-lock.json causing issues when using mwc [specifically in ts template]

[smashah]

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

1. 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
2. Install an mwc (e.g @material/mwc-dialog). Add implementation somewhere inside the app (e.g my-view1.ts).
3. 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:

1. delete package-lock.json
2. delete node_modules
3. run npm i
4. 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

[smashah]

Possibly related to #346

[stale[bot]]

This project is no longer under development and will be transitioning to a read-only repo. Thank you for your contributions.