fix(nuxt): don't render unknown components with placeholder (#18494)

nuxt · Jan 25, 2023 · fdb31f4 · fdb31f4
1 parent 3ec1084
commit fdb31f4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
@@ -133,12 +133,14 @@ function findComponent (components: Component[], name: string, mode: LoaderOptio
   const component = components.find(component => id === component.pascalName && ['all', mode, undefined].includes(component.mode))
   if (component) { return component }
 
+  const otherModeComponent = components.find(component => id === component.pascalName)
+
   // Render client-only components on the server with <ServerPlaceholder> (a simple div)
-  if (mode === 'server' && !component) {
+  if (mode === 'server' && otherModeComponent) {
     return components.find(c => c.pascalName === 'ServerPlaceholder')
   }
 
   // Return the other-mode component in all other cases - we'll handle createClientOnly
   // and createServerComponent above
-  return components.find(component => id === component.pascalName)
+  return otherModeComponent
 }
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
@@ -16,6 +16,7 @@
     </NuxtLink>
     <NestedSugarCounter :multiplier="2" />
     <CustomComponent />
+    <Spin>Test</Spin>
     <component :is="`test${'-'.toString()}global`" />
     <component :is="`with${'-'.toString()}suffix`" />
     <ClientWrapped ref="clientRef" style="color: red;" class="client-only" />

diff --git a/test/fixtures/basic/plugins/register.ts b/test/fixtures/basic/plugins/register.ts
@@ -0,0 +1,13 @@
+import { defineComponent, h } from 'vue'
+
+const Spin = defineComponent({
+  setup (props, { slots }) {
+    return () => {
+      return h('div', slots.default?.())
+    }
+  }
+})
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('Spin', Spin)
+})