🐛 BUG: Hydrated components exported via JS break prod builds

[benjaminbarbe]

What version of astro are you using?

1.0.0-beta.17

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Related to: #3134

When I deactivate the partial hydration the exception is no longer raised in production build.

 generating static routes 
▶ src/pages/[...test]/index.astro
 error   Cannot find the built path for /src/components/Counter.jsx
    at Object.resolve (file:///home/projects/github-uydp8r/node_modules/astro/dist/core/build/generate.js:153:15)
    at Module.generateHydrateScript (/node_modules/astro/dist/runtime/server/hydration.js:61:165)
    at Module.renderComponent (/node_modules/astro/dist/runtime/server/index.js:226:27)
    at async _render (/node_modules/astro/dist/runtime/server/index.js:43:11)
    at async renderAstroComponent (file:///home/projects/github-uydp8r/dist/entry.mjs?time=1651044440463:806:20)
    at async renderToString (file:///home/projects/github-uydp8r/dist/entry.mjs?time=1651044440463:776:18)
    at async renderComponent (file:///home/projects/github-uydp8r/dist/entry.mjs?time=1651044440463:575:20)
    at async _render (file:///home/projects/github-uydp8r/dist/entry.mjs?time=1651044440463:494:11)
    at async renderAstroComponent (file:///home/projects/github-uydp8r/node_modules/astro/dist/runtime/server/index.js:438:20)
    at async Module.renderPage (file:///home/projects/github-uydp8r/node_modules/astro/dist/runtime/server/index.js:388:22)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-uydp8r?file=src%2Fpages%2F[...test]%2Findex.astro

Participation

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

[bholmesdev]

This is part of a larger issue library maintainers are running into. Specifically, if you have a package that needs to export components via named exports:

// my-library/components
export TemplateWithComponents from './TemplateWithComponents.astro'
export Dynamic from './Dynamic.jsx'

...any clientside JS used will fail. This includes script tags (#3134) and third party component libraries (#2182).

@benjaminbarbe for your issue specifically, I'd advice against exporting .astro files from JS files if they include hydrated components. I will keep this issue open though since your minimum reproduction is useful!

[hippotastic]

As you just closed some other related bugs and mentioned that you were collecting your efforts here, I thought I should add something I mentioned a while ago on Discord:

The re-exporting issues do not only affect client-side JS code. They also affect CSS during development. If the re-exported external .astro component includes a <style> block, the auto-generated astro-AABBCCDD class name of the scoped CSS does not match the class name appended to the rendered component when running astro dev, causing the style not to be applied during development.

In astro build, this error does not occur.

[benjaminbarbe]

@bholmesdev

Do you have another way to do it?
I used a js file to be able to export multiple Astro components at once (reused as a loop in multiple places). I can't seem to do this via the astro file export?

For the moment, the only workaround I found is indeed to import directly and thus duplicate my code.

Thanks

[delucis]

I don’t believe there’s a workaround currently (apart from importing directly), and we’ll need to wait for a fix. This issue has been labelled p4-important so looks like the team are prioritising it.

[matthewp]

• Currently how we do this is by tracing island usage through a .astro file's $$metadata export. Since .js files do not have that we lose the information.
• We could export this information during compilation. We would then need to be able to trace Astro component usage from the page.
  • Maybe resolveId can be used to trace?