Lit + SSR: unable to resolve a valid export

[JosefJezek]

Astro info

Astro version            v2.10.14
Package manager          npm
Platform                 linux
Architecture             x64
Adapter                  Couldn't determine.
Integrations             @astrojs/lit

What browser are you using?

Chrome

Describe the Bug

error   Unable to resolve a valid export for "md-outlined-button"! Please open an issue at https://astro.build/issues!
  File:
    /home/projects/github-uiraud/node_modules/astro/dist/runtime/server/hydration.js:83:11
  Code:
    82 |     children: "",
    > 83 |     props: {
         |           ^
      84 |       // This is for HMR, probably can avoid it in prod
      85 |       uid: astroId
      86 |     }
  Stacktrace:
Error: Unable to resolve a valid export for "md-outlined-button"! Please open an issue at https://astro.build/issues!
    at Module.generateHydrateScript (/home/projects/github-uiraud/node_modules/astro/dist/runtime/server/hydration.js:83:11)
    at renderFrameworkComponent (/home/projects/github-uiraud/node_modules/astro/dist/runtime/server/render/component.js:267:46)
    at async Module.renderComponent (/home/projects/github-uiraud/node_modules/astro/dist/runtime/server/render/component.js:351:10)
    at async Module.renderChild (/home/projects/github-uiraud/node_modules/astro/dist/runtime/server/render/any.js:14:11)

What's the expected result?

MD components are working with Next.js SSR, see material-components/material-web#4245 (comment)

Please improve support for Lit.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-uiraud?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[marcmalerei]

My mistake. Instead of writing the name of the component in upper camelcase, i

Astro info

Astro version            v2.10.14
Package manager          npm
Platform                 linux
Architecture             x64
Adapter                  Couldn't determine.
Integrations             @astrojs/lit

What browser are you using?

Chrome

Describe the Bug

error   Unable to resolve a valid export for "md-outlined-button"! Please open an issue at https://astro.build/issues!
  File:
    /home/projects/github-uiraud/node_modules/astro/dist/runtime/server/hydration.js:83:11
  Code:
    82 |     children: "",
    > 83 |     props: {
         |           ^
      84 |       // This is for HMR, probably can avoid it in prod
      85 |       uid: astroId
      86 |     }
  Stacktrace:
Error: Unable to resolve a valid export for "md-outlined-button"! Please open an issue at https://astro.build/issues!
    at Module.generateHydrateScript (/home/projects/github-uiraud/node_modules/astro/dist/runtime/server/hydration.js:83:11)
    at renderFrameworkComponent (/home/projects/github-uiraud/node_modules/astro/dist/runtime/server/render/component.js:267:46)
    at async Module.renderComponent (/home/projects/github-uiraud/node_modules/astro/dist/runtime/server/render/component.js:351:10)
    at async Module.renderChild (/home/projects/github-uiraud/node_modules/astro/dist/runtime/server/render/any.js:14:11)

What's the expected result?

MD components are working with Next.js SSR, see material-components/material-web#4245 (comment)

Please improve support for Lit.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-uiraud?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

I had a similar Error. I made the mistake to write <my-element/> instead <MyElement/> in the index.astro file.

[bluwy]

Astro's island component detection works through direct imports of the framework component:

A client directive can only be used on a UI framework component that is directly imported into a .astro component.

In this case, you're importing import '@material/web/button/outlined-button'; and then using it <md-outlined-button client:load>Hello World</md-outlined-button>. Astro can't know those are related in order to server-side render and hydrate it.

You can fix it by writing it this way:

---
import { MdOutlinedButton } from '@material/web/button/outlined-button';
---

<MdOutlinedButton client:load>Hello World</MdOutlinedButton>