N
Nuxt•4w ago
Simon

Resolving components in JSX

Here's a funny one. I would like to write some JSX for dynamically mounting a component, and then I would like to compile the result into a statically servable set of files. Seems straightforward enough, and indeed the following works like a charm. 
<script setup lang="jsx">
const Jsx = ref(<p>Some text</p>);
function loadSomeComponent() {
  Jsx.value = <p><SomeComponent /></p>;
}
</script>

<template>
  <Jsx />
  <button @click="loadSomeComponent()">Load component directly</button>
</template>
<script setup lang="jsx">
const Jsx = ref(<p>Some text</p>);
function loadSomeComponent() {
  Jsx.value = <p><SomeComponent /></p>;
}
</script>

<template>
  <Jsx />
  <button @click="loadSomeComponent()">Load component directly</button>
</template>
For some weird reason, though, the above break down once the button is moved into the <slot> of another component. 
<script setup lang="jsx">
const Jsx = ref(<p>Some text</p>);
function loadSomeComponent() {
  Jsx.value = <p><SomeComponent /></p>;
}
</script>

<template>
  <Jsx />
  <PassThrough>
    <button @click="loadSomeComponent()">Load component from slot</button>
  </PassThrough>
</template>

<!-- components/PassThrough.vue -->
<template>
  <slot />
</template>
<script setup lang="jsx">
const Jsx = ref(<p>Some text</p>);
function loadSomeComponent() {
  Jsx.value = <p><SomeComponent /></p>;
}
</script>

<template>
  <Jsx />
  <PassThrough>
    <button @click="loadSomeComponent()">Load component from slot</button>
  </PassThrough>
</template>

<!-- components/PassThrough.vue -->
<template>
  <slot />
</template>
In this second example, clicking the button just replaces <Jsx /> with <somecomponent />, which of course isn't very helpful because the browser doesn't know what to do with this tag. I can fix the second scenario by importing SomeComponent explicitly, 
import SomeComponent from '~/components/SomeComponent.vue';
import SomeComponent from '~/components/SomeComponent.vue';
but having to explicitly import all components used in my JSX code is tedious. Moreover, forgetting to import some component results in a silent error, which is a maintainability nightmare. Does anyone have an idea what could be the issue here, and whether the second scenario can be saved in any way that is less brittle than "import all components"? I have attached an MWE to reproduce the problem. Please remember that I need to served this site statically, i.e. the site should be served using npm run build && npx serve .output/public. Both of the above scenarios work fine with npm run dev, so you won't be able to reproduce my findings with that.

jsx.zip

3 Replies
kapa.ai
kapa.ai•4w ago
Hi @Simon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can offer some insights into your question about resolving components in JSX within Nuxt, particularly when dealing with dynamic components and static site generation. The issue you're experiencing is related to how Nuxt handles auto-imports and component resolution, especially in the context of JSX and static site generation. Here are some key points to consider: 1. Auto-imports limitation: Nuxt's auto-import feature for components doesn't work with JSX/TSX files when using webpack. This is mentioned in a GitHub pull request comment: "Note that this does not enable support for auto-importing components used within JSX/TSX files in webpack; that is a separate issue." fix(schema): pass correct jsx config for esbuild-loader 2. Workaround for JSX: As suggested in the same GitHub comment, a workaround is to import components from #components. This special alias is provided by Nuxt for explicit imports. You can use it like this: 
   import { SomeComponent } from '#components'
   
   import { SomeComponent } from '#components'
Direct Imports 3. Dynamic components: When using dynamic components with the <component :is="..."> syntax, you need to use the resolveComponent helper or import the component directly. For example: 
   import { resolveComponent } from 'vue'
   // or
   import { SomeComponent } from '#components'

   // Then in your setup
   const MyComponent = resolveComponent('MyComponent')
   // or use SomeComponent directly
   
   import { resolveComponent } from 'vue'
   // or
   import { SomeComponent } from '#components'

   // Then in your setup
   const MyComponent = resolveComponent('MyComponent')
   // or use SomeComponent directly
Stack Overflow Post > Nuxt3 dynamic <component> Part 3 4. Static site generation: When generating a static site, you need to ensure that all components are properly resolved at build time. The auto-import feature might not work as expected in this scenario, especially with JSX. Given these constraints, here are some recommendations: 1. Use explicit imports: For components used in JSX, explicitly import them using the #components alias. This ensures that the components are properly resolved during static site generation. 2. Consider using resolveComponent: If you need to dynamically resolve components, use the resolveComponent helper from Vue. However, be aware that this might have limitations in a static site context. 3. Avoid relying on auto-imports for JSX: Since auto-imports don't work well with JSX in webpack, it's safer to explicitly import all components you use in JSX code. 4. Test thoroughly: Always test your static site build (npm run build && npx serve .output/public) to ensure all components are properly resolved and rendered. While this approach might be more verbose than relying on auto-imports, it provides more predictable behavior, especially for static site generation. If you need a more seamless solution, you might want to consider opening an issue on the Nuxt GitHub repository to request better support for auto-imports in JSX, particularly for static site generation scenarios. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@1071976713413742663> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Simon
SimonOP•4w ago
Filed an issue on GitHub: https://github.com/nuxt/nuxt/issues/30929
GitHub
Auto-import fails to import components used in JSX when building st...
Environment Stackblitz: ------------------------------ - Operating System: Linux - Node Version: v18.20.3 - Nuxt Version: 3.15.4 - CLI Version: 3.21.1 - Nitro Version: 2.10.4 - Package Manager: npm...

Did you find this page helpful?