Unable to resolve a valid export with dynamic component

[florian-lefebvre]

Astro Info

Astro                    v3.2.0
Node                     v18.14.1
System                   Windows (x64)
Package Manager          yarn
Output                   hybrid
Adapter                  @astrojs/netlify
Integrations             @astrojs/vue
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I have this code in an astro page:

---
import A from "A.vue";
import B from "B.vue";
import C from "C.vue";
---
<Layout>
  <main>
          {(() => {
            const Comp = {
              a: A,
              b: B,
              c: C,
            }[type]; // "a" | "b" | "c"

            <Comp someSharedProps={...} client:load />;
          })()}
  </main>
</Layout>

But this throws this error, both when running astro dev and astro build:

 error   Unable to resolve a valid export for "Comp"! Please open an issue at https://astro.build/issues!
  File:
    D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\hydration.js:72:11
  Code:
    71 |   if (!componentExport.value) {
    > 72 |     throw new Error(
         |           ^
      73 |       `Unable to resolve a valid export for "${metadata.displayName}"! Please open an issue at https://astro.build/issues!`
      74 |     );
      75 |   }
  Stacktrace:
Error: Unable to resolve a valid export for "Comp"! Please open an issue at https://astro.build/issues!
    at Module.generateHydrateScript (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\hydration.js:72:11)
    at renderFrameworkComponent (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\component.js:259:24)
    at async Module.renderComponent (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\component.js:344:10)
    at async Module.renderChild (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\any.js:7:11)
    at async Object.renderToFinalDestination (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\util.js:115:7)
    at async RenderTemplateResult.render (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\astro\render-template.js:39:9)
    at async Module.renderChild (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\any.js:29:5)
    at async Object.renderToFinalDestination (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\util.js:115:7)
    at async RenderTemplateResult.render (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\astro\render-template.js:39:9)
    at async Module.renderChild (D:\DEV\PROJECTS\PRO\satquiztime\satquiz\node_modules\astro\dist\runtime\server\render\any.js:29:5)

To be precise, it throws the error, then the server refreshes multiple times, then it renders eveything but the failing part

What's the expected result?

It should pick the right component and render it

Link to Minimal Reproducible Example

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

Participation

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

[lilnasy]

Noticed this with react as well. Using a component by any name other than its imported one breaks.

Replacing index.astro with this on https://astro.new/framework-react?on=stackblitz seems to be enough.

---
import Counter from '../components/Counter.tsx';
const Component = Counter
---
<Component count={0} client:load>

[natemoo-re]

Yeah this is a limitation of Astro's static analysis. In order to bundle islands, we need to know which file they come from. As soon the connection between a Component and its import statement is broken, we can no longer trace which files need to be bundled. We could definitely improve this error message, though.

[florian-lefebvre]

Yes! I think the solution is to move this dynamic component selection to a UI framework? If yes, then it could be stated in the error message