Error using mwc-checkbox

[djm158]

I am experimenting using material-components-web-components in the pwa-starter-kit.

I installed the mwc-checkbox element as follows:

npm install @material/mwc-checkbox

Then imported in my js module:

import { html } from '@polymer/lit-element';
import { SharedStyles } from './shared-styles.js';
import { PageViewElement } from './page-view-element.js';
import { Checkbox } from '@material/mwc-checkbox';

class MyView1 extends PageViewElement {
  _render(props) {
    return html`
      ${SharedStyles}
      <section>
        <h2>Static page</h2>
        <p>This is a text-only page.</p>
        <p>It doesn't do anything other than display some static text.</p>
      </section>
      <section>
        <h2>Welcome</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare, aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.</p>
      </section>
      <section>
        <p>Vestibulum at est ex. Aenean id ligula id nibh dictum laoreet. Etiam non semper erat. Pellentesque eu justo rhoncus diam vulputate facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat metus ex, vel fringilla massa tincidunt sit amet. Nunc facilisis bibendum tristique. Mauris commodo, dolor vitae dapibus fermentum, odio nibh viverra lorem, eu cursus diam turpis et sapien. Nunc suscipit tortor a ligula tincidunt, id hendrerit tellus sollicitudin.</p>
        <mwc-checkbox></mwc-checkbox>
      </section>
    `;
  }
}

window.customElements.define('my-view1', MyView1);

But get the following:

[jfdumont]

Hello,

with my test, same with pwa-starter-kit. but works properly with the polymer-3-starter-kit

[lozandier]

I get the same error.

[suburbanworrier]

Same here for mwc-checkbox and mwc-radio.

If you swap out the import {style} from './mwc-checkbox-css.js'; line and define html directly within mwc-checkbox.js everything works fine...

const style = html`<style>@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var
...

As the online examples both work fine I initially assumed there was some issue with my WebPack setup but I now feel the presence of [object Object] proves the style is being imported but not handled correctly.

The imported block of style works correctly in those components that directly extend LitElement where both Checkbox and Radio extend FormableComponentElement.

I'd love to provide more info but debugging within a Webpack project seems super tough so please let me know what additional information I can provide in order to help (and likely how I'd go about getting that information).

[galanovnick]

As far as I can see this issue is mainly caused by lit-element versions mismatch.

As for mwc-dialog, the dialog html literal comes from the lit-element v. 0. 4. 0 (from mwc-base), while html literal of the imported styles comes from the lit-element v. 0. 5. 1 (from lit element itself).
So the latest mwc-base release depends on lit-element v 0. 4. 0, while latest mwc-dialog (not yet published) depends on lit-element v 0. 5. 1.

It makes complete sense that mwc-dialog doesn't work for now because it is not yet published.

As for mwc-checkbox and other published ones try to remove your package-lock.json and reinstall all your dependencies. This worked for me.

Update: I guess it's not about versions, but more likely about multiple copies of the lit-html lib for one element (like in the example with mwc-dialog).

[djm158]

@galanovnick with the recent 0.1.2 release of material-components-web-components, I can install mwc-checkbox into pwa-starter-kit and have it work without issue :)

As a user, I guess I will need to be more cognizant of not having mismatching versions of lit-element and lit-html between my dependencies.

[dfreedm]

This should be working, but I'll verify before closing.

[dfreedm]

Verified that this should be working with at least v0.6.0. Please ping the issue if something is still broken!