search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.17k stars 872 forks source link

Tabs broken on skypack #2359

Closed aomarks closed 3 years ago

aomarks commented 3 years ago

Describe the bug When imported from skypack.dev <mwc-tab-bar> is not interactive and throws ripple-related errors in the console.

To Reproduce

Import https://cdn.skypack.dev/@material/mwc-tab-bar and create a tab bar:

<script type="module" src="https://cdn.skypack.dev/@material/mwc-tab-bar"></script>

<mwc-tab-bar>
  <mwc-tab label="Tab one"></mwc-tab>
  <mwc-tab label="Tab two"></mwc-tab>
</mwc-tab-bar>

Note that tabs are not interactive and errors are thrown in the console:

mwc-tab-bar.js:37 Uncaught (in promise) TypeError: this.scrollerElement.scrollToPosition is not a function
    at Object.scrollTo (mwc-tab-bar.js:37)
    at MDCTabBarFoundation2.scrollIntoView (foundation.js:171)
    at MDCTabBarFoundation2.activateTab (foundation.js:134)
    at HTMLElement.<anonymous> (mwc-tab-bar.js:130)
mwc-tab.js:98 Uncaught (in promise) TypeError: this.tabIndicator.activate is not a function
    at Object.activateIndicator (mwc-tab.js:98)
ripple-handlers.js:41 Uncaught (in promise) TypeError: r.startHover is not a function
    at ripple-handlers.js:41
ripple-handlers.js:46 Uncaught (in promise) TypeError: r.endHover is not a function
    at ripple-handlers.js:46

Latest (0.20.0): https://lit.dev/playground/#project=W3sibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiaHR0cHM6Ly9jZG4uc2t5cGFjay5kZXYvQG1hdGVyaWFsL213Yy10YWItYmFyXCI-PC9zY3JpcHQ-XG5cbjxtd2MtdGFiLWJhcj5cbiAgPG13Yy10YWIgbGFiZWw9XCJUYWIgb25lXCI-PC9td2MtdGFiPlxuICA8bXdjLXRhYiBsYWJlbD1cIlRhYiB0d29cIj48L213Yy10YWI-XG48L213Yy10YWItYmFyPiJ9XQ

Canary (0.21.0-canary.5dd85d0c.0): https://lit.dev/playground/#project=W3sibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiaHR0cHM6Ly9jZG4uc2t5cGFjay5kZXYvQG1hdGVyaWFsL213Yy10YWItYmFyQDAuMjEuMC1jYW5hcnkuNWRkODVkMGMuMFwiPjwvc2NyaXB0PlxuXG48bXdjLXRhYi1iYXI-XG4gIDxtd2MtdGFiIGxhYmVsPVwiVGFiIG9uZVwiPjwvbXdjLXRhYj5cbiAgPG13Yy10YWIgbGFiZWw9XCJUYWIgdHdvXCI-PC9td2MtdGFiPlxuPC9td2MtdGFiLWJhcj4ifV0

Screenshots image

e111077 commented 3 years ago

This is due to skypack handing lit-element 2.5.0 in an odd manner. We just released 0.21.0. Cab you try it again?

aomarks commented 3 years ago

This is due to skypack handing lit-element 2.5.0 in an odd manner. We just released 0.21.0. Cab you try it again?

Same problem:

https://lit.dev/playground/#project=W3sibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiaHR0cHM6Ly9jZG4uc2t5cGFjay5kZXYvQG1hdGVyaWFsL213Yy10YWItYmFyQDAuMjEuMFwiPjwvc2NyaXB0PlxuXG48bXdjLXRhYi1iYXI-XG4gIDxtd2MtdGFiIGxhYmVsPVwiVGFiIG9uZVwiPjwvbXdjLXRhYj5cbiAgPG13Yy10YWIgbGFiZWw9XCJUYWIgdHdvXCI-PC9td2MtdGFiPlxuPC9td2MtdGFiLWJhcj4ifV0

e111077 commented 3 years ago

this is now due to us capping lit-html to ~1.3.0 and lit element doing ^1.3.0 thus skypack loading both 1.3.0 and 1.4.0. Should be fixed when we merge this one and make a release

https://github.com/material-components/material-components-web-components/pull/2367

e111077 commented 3 years ago

Seems like skypack is eliding the import '@material/mwc-tab' and import '@material/mwc-tab-scroller'

this doesn't seem to happen on unpkg. additionally it seems like skypack compilation is breaking classMap directives. Inspect the button in the fab that is rendered.

This very much seems like something we'll have to file on skypack but I don't have the time to traige the issue on their side so the issue may get rejected

gonna mark this issue as wontfix WAI