fix(nuxt): don't warn when injecting client-only components (#26341)

nuxt · Mar 18, 2024 · 90591e3 · 90591e3
1 parent 2c0fc3a
commit 90591e3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
@@ -165,6 +165,8 @@ export default defineNuxtModule<ComponentsOptions>({
       }
     })
 
+    const serverPlaceholderPath = resolve(distDir, 'app/components/server-placeholder')
+
     // Scan components and add to plugin
     nuxt.hook('app:templates', async (app) => {
       const newComponents = await scanComponents(componentDirs, nuxt.options.srcDir!)
@@ -176,11 +178,11 @@ export default defineNuxtModule<ComponentsOptions>({
             ...component,
             _raw: true,
             mode: 'server',
-            filePath: resolve(distDir, 'app/components/server-placeholder'),
+            filePath: serverPlaceholderPath,
             chunkName: 'components/' + component.kebabName
           })
         }
-        if (component.mode === 'server' && !nuxt.options.ssr) {
+        if (component.mode === 'server' && !nuxt.options.ssr && !newComponents.some(other => other.pascalName === component.pascalName && other.mode === 'client')) {
           logger.warn(`Using server components with \`ssr: false\` is not supported with auto-detected component islands. If you need to use server component \`${component.pascalName}\`, set \`experimental.componentIslands\` to \`true\`.`)
         }
       }

diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts
@@ -378,7 +378,7 @@ export const nuxtConfigTemplate: NuxtTemplate = {
       headers: undefined
     }
     const shouldEnableComponentIslands = ctx.nuxt.options.experimental.componentIslands && (
-      ctx.nuxt.options.dev || ctx.nuxt.options.experimental.componentIslands !== 'auto' || ctx.app.pages?.some(p => p.mode === 'server') || ctx.app.components?.some(c => c.mode === 'server')
+      ctx.nuxt.options.dev || ctx.nuxt.options.experimental.componentIslands !== 'auto' || ctx.app.pages?.some(p => p.mode === 'server') || ctx.app.components?.some(c => c.mode === 'server' && !ctx.app.components.some(other => other.pascalName === c.pascalName && other.mode === 'client'))
     )
     return [
       ...Object.entries(ctx.nuxt.options.app).map(([k, v]) => `export const ${camelCase('app-' + k)} = ${JSON.stringify(v)}`),