render issues working with lit 2

[DominicWrege]

This is just an example but will also effect any other components which is using the ripple component.

To Reproduce
Steps to reproduce the behavior:

• clone the lit-element-starter-ts repo
• run npm i
• run npm i @material/mwc-button
• run npm i @material/mwc-button
• add the <mwc-button raised label="test"></mwc-button> to the render fn in the my-elements.ts file
• addimport "@material/mwc-button"; to the my-elements.ts file
• open http://localhost:8000/dev/index.html
• hover over the mwc-button

result:

none console errors....

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Browser Version (please complete the following information):

• OS: [e.g. iOS] Mac OS 10.15
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] 92

Additional context
Add any other context about the problem here.

[mbec-lbto]

I'm having the same issue. In fact not just the mwc-button, but many others (mwc-dialog raising 'TypeError: Cannot read property 'classList' of null' etc)

I am however able to get around the problem building my own local version of node_modules/@material instead of getting it from npm.

Could it be a packaging / distribution issue rather than a specific component? sorry I'm not very familiar with the tooling and terminology.

Steps to reproduce and 'fix' the problem:

1. build material-components-web-components in my_mwc

• git clone git@github.com:material-components/material-components-web-components.git my_mwc
• cd my_mwc
• npm i
• npm build

2. in 'myapp', using npm

• npm i

this brings the various node_modules/@material dependencies.
And creates this and all kind of other issues. I also tried specifying the 'canary' release in my @material package.json dependencies, to the same effect.

3. in 'myapp', using my locally built dependency

• rm -fr node_modules/@material
• ln -s .../my_mwc/node_modules/@material

everything works as expected now.

[charleslukes]

Do we have any fix for this yet?

[mbec-lbto]

The update on my side was that removing the entire content of my node_modules and doing npm -i worked with the packages distributed.
I remember having these issues in the past where adding packages incrementally seems to create issues in some cases, and those go away when you npm i from scratch.

[charleslukes]

I just deleted my node_modules,

and install again

tried to import it via import '../../../node_modules/@material/textfield' (I am not sure if this is the right thing to do here)

The error seems to have gone but the mwc template is not showing

[mbec-lbto]

this is for buttons, I do import '@material/mwc-button/mwc-button.js'; if that helps.

[mbec-lbto]

yours should probably be mwc-textfield rather than textfield, and drop the relative path.

[charleslukes]

Yes used mwc-textfield but same error again.

I just cloned https://github.com/material-components/material-components-web-components.git

I want to build and grab the files I want is that what you did?

[mbec-lbto]

At that point I'm unable to help further because it works for me. Here's what my package.json looks like

"dependencies": {
    "@material/mwc-button": "^0.21.0",
    "@material/mwc-dialog": "^0.21.0",
    "@material/mwc-icon-button-toggle": "^0.21.0",
    "@material/mwc-slider": "^0.21.0",
    "@material/mwc-textfield": "^0.21.0",
    "@webcomponents/webcomponentsjs": "^2.5.0",
    "chart.js": "^3.3.0",
    "chartjs-adapter-date-fns": "^1.1.0-beta.1",
    "chartjs-plugin-colorschemes": "^0.4.0",
    "date-fns": "^2.21.3",
    "lit": "^2.0.0-rc.2",
    "msgpack-lite": "^0.1.26",
    "numeral": "^2.0.6"
  },

[charleslukes]

Alright thank you for your time

[e111077]

Russell on the team was able to diagnose the direct issue.

when you install from npm the folder structure comes out to something like this

/node_modules
  /lit-html@2
  /@material
    /mwc-button
      /node_modules
        /lit-html@1
        /mwc-ripple
          /node_modules/lit-html@1

this means that mwc-ripple and mwc-button are using the same version of lit-html but it's not the same file. this means that the lit-html 1 tactic of doing instanceof TemplateResult breaks. This is fixed in Lit 2 in which TemplateResult is only an interface and not a class.

The fix here is to make node_modules deduplicate the lit 1 dependencies or wait for us to push a lit 2 version of MWC

[charleslukes]

Thank you @e111077

[DominicWrege]

Is it fixed now?

[e111077]

Hello, Lit 2 stable was released in october and MWC was updated to Lit 2 the same day as release. If you're still running into this issue, please update your mwc installation to one that uses Lit 2