Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃悰 BUG: client:only="lit" error: Failed to resolve module #2526

Closed
ClintH opened this issue Feb 3, 2022 · 10 comments
Closed

馃悰 BUG: client:only="lit" error: Failed to resolve module #2526

ClintH opened this issue Feb 3, 2022 · 10 comments
Labels
- P2: has workaround Bug, but has workaround (priority)

Comments

@ClintH
Copy link

ClintH commented Feb 3, 2022

What version of astro are you using?

0.22.0

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

I'm trying to use a client-only Lit element. Using the client:only="lit" attribute as in:

<my-counter client:only="lit"></my-counter>

Throws the error:

Uncaught (in promise) TypeError: Failed to resolve module specifier ''
at index.astro?html-proxy&index=1.js:5:1
at async onLoad (only.ts:9:18)

I also tried using @astrojs/renderer-lit with the same outcome.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-bbch9k?file=src/pages/index.astro

@github-actions github-actions bot added this to Needs Triage in 馃悰 Bug Tracker Feb 3, 2022
@ClintH ClintH changed the title 馃悰 BUG: client:only="lit" does not failed to resolve module 馃悰 BUG: client:only="lit" error: Failed to resolve module Feb 3, 2022
@aafmisra
Copy link

aafmisra commented Feb 9, 2022

I get the same TypeError when using client:visible on a web component

@matthewp
Copy link
Contributor

Thanks! We do not support client:only on base module imports at the moment. The logic for determining which import statement matches which component usage is based on seeing the imported name. Here's the code in the compiler: https://github.com/withastro/compiler/blob/f25131ceaf57e4b8b4eecba282209de2aacf6d26/internal/printer/printer.go#L348

I think this is something we probably just cannot possibly support. We don't know that my-counter matches up to import '../components/Counter.js';.

I think what we need here is a good error message when we encounter a client:only on a custom element.

@matthewp matthewp added - P2: has workaround Bug, but has workaround (priority) s1-small labels May 10, 2022
@matthewp matthewp removed their assignment May 10, 2022
@rodydavis
Copy link

rodydavis commented Aug 15, 2022

How can we use a client only component that we do not have a SSR strategy for?

for example i want/need threejs and there is not content i plan on rendering.

Also for the import even if the developer is responsible with including the is-inline script tag, that would be nice just ignore the custom tag and pass it through on the markup

Here is an example that would benefit: https://github.com/rodydavis/astro-playground-elements

@e111077
Copy link
Contributor

e111077 commented Aug 15, 2022

Can this be worked around now that the export const tagName requirement is gone?

Alternatively, can we simply just define a map file somewhere that can one day be auto-generated by Web Component Analyzer?

@matthewp
Copy link
Contributor

matthewp commented Oct 6, 2022

Yes, given that we no longer support tagName approach, you can import the element constructor and use client:only on it directly.

Going to close this issue given its age and the new approach, please open new issues as needed.

@matthewp matthewp closed this as completed Oct 6, 2022
馃悰 Bug Tracker automation moved this from Accepted to Done Oct 6, 2022
@e111077
Copy link
Contributor

e111077 commented Nov 4, 2022

Do you mind re-opening this issue? There doesn't seem to be a workaround because client:only="lit" doesn't seem to do the right thing 馃槩

repro case based on the official templates:

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

@e111077
Copy link
Contributor

e111077 commented Nov 4, 2022

well it seems to load the definition, but does not include the tag name w/ attributes / properties set

@whs
Copy link

whs commented Nov 5, 2022

Running into this as well

@hrmcdonald
Copy link
Contributor

Also seeing this issue.

@FredericHeem
Copy link

All my components are wrapped into a function for dependency injection:

---
import counter from '../components/Counter';
const context = {
 // global data and function
};
const Counter = counter(context);
---
<html lang="en">
<body>
    <Counter client:only="react" />
  </body>
</html>

That results in the error: Unable to find matching import statement for client:only component

Is there a workaround ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P2: has workaround Bug, but has workaround (priority)
Projects
No open projects
Development

No branches or pull requests

9 participants