render issues working with lit 2

DominicWrege commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Do we have any fix for this yet?

mbec-lbto commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

mbec-lbto commented 3 years ago

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

charleslukes commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Alright thank you for your time

e111077 commented 3 years ago

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 commented 3 years ago

Thank you @e111077

DominicWrege commented 2 years ago

Is it fixed now?

e111077 commented 2 years ago

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

material-components / material-web

render issues working with lit 2 #2433