Using eleventy-plugin-lit is it possible to use @material/mwc-button for SSR?

[lmadueno10]

Every time I try to include import '@material/mwc-button'; in my component...

and then generate the build of the application generates this exception, someone if it is possible to use @Material?

when the import of @material/mwc-button is commented out if it allows me to generate normally...

GITHUB: https://github.com/lmadueno10/estasies

[coder0107git]

After doing some digging through the errors I found that in the package.json of @material/mwc-button, @material/mwc-ripple, @material/mwc-base, @material/dom, and @material/mwc-icon the line "type": "module" is missing (eleventy requires that line must be present in the projects root package.json or all javascript module files extensions end in .mjs). Also, in utils.js from @material/mwc-base eleventy encounters document.addEventListener which doesn't exist in nodejs.

[aomarks]

Sorry I meant a potential change to mwc itself, not something you could do as a workaround.

[lmadueno10]

Okay, thank you very much. I have added type: module in package.json of mwc-button, mwc-ripple, mwc-base, dom, mwc-icon...

but I receive the following exception, do you know how I could trace it please? or maybe I'm missing something?

in the log I receive the following

[thescientist13]

Yeah, have also had some challenges with MWC in ESM contexts while testing compatibility for a project I was working on. Some of the experiences Had ty like not having extensions for imports or and assuming processing of CSS files.
material-components/material-web#2632

A couple examples from this release I tested
https://unpkg.com/browse/@material/mwc-button@0.25.2/mwc-button.js

import { ButtonBase } from './mwc-button-base';
import { styles } from './styles.css';

For example, in your screen shot, it looks like the file not found is missing a .js extension.

For myself, after making some work arounds for the above issues ultimately I think I got stuck at this point though.
microsoft/tslib#143

However, looking at their releases now, they have made some improvement if I look at the latest version of button, so maybe make sure your are on latest?
https://unpkg.com/browse/@material/mwc-button@0.26.1/mwc-button.js

[lmadueno10]

Thank you very much for your answer, it helped me a lot. I installed version 0.26.1 which does add "js" to mwc-button-base and styles.css.js.

But now what you had commented before just came out "Also, in utils.js from @material/mwc-base eleventy encounters document.addEventListener which doesn't exist in nodejs."

I was wondering if I should redefine it? or is it another issue? I can't finish understanding. Thank you very much for your support.

[thescientist13]

Yeah, it's most likely that MWC is just not SSR "compatible" yet, combined with having any limitations of the environment you're running in, as any tool doing server rendering like Lit+SSR (generally) should define a scope of compatibility / support so users can manage expectations. Sometimes it's just as easy as keeping DOM stuff out of constructor / connectedCallback, or use this.shadowRoot detection for things like hydration, etc.

So, it's a little give and take between the tooling and the components. Though some of this is trying to be mitigated through the Web Components Community Group and one if its initiatives for establishing these "Community" Protocols. There is one on SSR if you want to follow along and / or chime in! 🙌
https://github.com/webcomponents-cg/community-protocols

Otherwise, getting packages on a path towards ESM is a great start, so anytime you run along these kinds of issues around just resolving modules, it's great to reach out, file issues, bump threads, etc.

[lmadueno10]

Hello everyone and again thank you very much for your support, I tried to add type module to ripple and give a settimeout to the load of addEventListener, do you know how I could bypass it? For me it is not a priority to shadowroot the mwc components, but it does not affect the rest of the SSR (for example: ul li). I hope you can support me, thank you very much

I already have all the mwc with type: module, but now only this one remains

[thescientist13]

Unless you actually write code like this and shim it in somehow

document = document || {};
document.addEventListener = () => {};

then you will keep getting errors like that.

So you will have to either

1. Shim it
2. patch package MWC itself locally for yourself to avoid calling those methods directly without a browser present, e.g.

   // we mostly likely running a browser
   if(!process) {
     // do client side only stuff here
   }

3. Or as suggested earlier and recommended long term, get an upstream change into MWC itself