diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
index 7063174faf..7017440611 100644
--- a/packages/nuxt/src/components/loader.ts
+++ b/packages/nuxt/src/components/loader.ts
@@ -31,7 +31,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
       if (include.some(pattern => pattern.test(id))) {
         return true
       }
-      return isVue(id, { type: ['template', 'script'] })
+      return isVue(id, { type: ['template', 'script'] }) || !!id.match(/\.[tj]sx$/)
     },
     transform (code) {
       const components = options.getComponents()
diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
index c086d6ee29..85e599f8f9 100644
--- a/packages/nuxt/src/components/module.ts
+++ b/packages/nuxt/src/components/module.ts
@@ -129,11 +129,11 @@ export default defineNuxtModule<ComponentsOptions>({
     const unpluginServer = createTransformPlugin(nuxt, getComponents, 'server')
     const unpluginClient = createTransformPlugin(nuxt, getComponents, 'client')
 
-    addVitePlugin(unpluginServer.vite(), { server: true, client: false })
-    addVitePlugin(unpluginClient.vite(), { server: false, client: true })
+    addVitePlugin(() => unpluginServer.vite(), { server: true, client: false })
+    addVitePlugin(() => unpluginClient.vite(), { server: false, client: true })
 
-    addWebpackPlugin(unpluginServer.webpack(), { server: true, client: false })
-    addWebpackPlugin(unpluginClient.webpack(), { server: false, client: true })
+    addWebpackPlugin(() => unpluginServer.webpack(), { server: true, client: false })
+    addWebpackPlugin(() => unpluginClient.webpack(), { server: false, client: true })
 
     // Do not prefetch global components chunks
     nuxt.hook('build:manifest', (manifest) => {
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 9c1d553664..03d3df8d30 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -105,6 +105,7 @@ describe('pages', () => {
     // should import JSX/TSX components with custom elements
     expect(html).toContain('TSX component')
     expect(html).toContain('<custom-component>custom</custom-component>')
+    expect(html).toContain('Sugar Counter 12 x 2 = 24')
   })
 
   it('respects aliases in page metadata', async () => {
diff --git a/test/fixtures/basic/components/Tsx.tsx b/test/fixtures/basic/components/Tsx.tsx
index 160972e31c..21d8cc355a 100644
--- a/test/fixtures/basic/components/Tsx.tsx
+++ b/test/fixtures/basic/components/Tsx.tsx
@@ -3,6 +3,7 @@ export default defineComponent({
     return <div>
       TSX component
       <custom-component>custom</custom-component>
+      <SugarCounter multiplier={2} />
     </div>
   }
 })