fix(compiler-core): warn when slot used on non-root template

packages/compiler-core/__tests__/transform.spec.ts

@@ -20,6 +20,7 @@ import { transformElement } from '../src/transforms/transformElement'
 import { transformSlotOutlet } from '../src/transforms/transformSlotOutlet'
 import { transformText } from '../src/transforms/transformText'
 import { PatchFlags } from '@vue/shared'
+import type { CompilerOptions } from '@vue/compiler-core'
 
 describe('compiler: transform', () => {
   test('context state', () => {
@@ -378,4 +379,75 @@ describe('compiler: transform', () => {
       )
     })
   })
+
+  describe('errors', () => {
+    function transformWithCodegen(
+      template: string,
+      options: CompilerOptions = {},
+    ) {
+      const ast = baseParse(template)
+      transform(ast, {
+        nodeTransforms: [
+          transformIf,
+          transformFor,
+          transformText,
+          transformSlotOutlet,
+          transformElement,
+        ],
+        ...options,
+      })
+      return ast
+    }
+
+    test('warn when v-slot used on non-root level <template>', () => {
+      const onError = vi.fn()
+
+      const ast = transformWithCodegen(
+        `
+        <template>
+          <Bar>
+            <template>
+              <template #header> Header </template>
+            </template>
+          </Bar>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_TEMPLATE_NOT_ROOT,
+          loc: (ast.children[0] as any).children[0].children[0].children[0].loc,
+        },
+      ])
+    })
+
+    test('dont warn when v-slot used on root level <template>', () => {
+      const onError = vi.fn()
+
+      transformWithCodegen(
+        `<template>
+          <Comp>
+            <template #header> Header </template>
+          </Comp>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls).toEqual([])
+    })
+
+    test('dont warn when v-slot used on root level <template> inside custom component', () => {
+      const onError = vi.fn()
+
+      transformWithCodegen(
+        `<template>
+          <div is="vue:customComp"><template v-slot="slotProps"></template></div>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls).toEqual([])
+    })
+  })
 })

packages/compiler-core/src/errors.ts

@@ -90,6 +90,7 @@ export enum ErrorCodes {
   X_V_MODEL_ON_PROPS,
   X_INVALID_EXPRESSION,
   X_KEEP_ALIVE_INVALID_CHILDREN,
+  X_TEMPLATE_NOT_ROOT,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -151,6 +152,9 @@ export const errorMessages: Record<ErrorCodes, string> = {
     'End bracket for dynamic directive argument was not found. ' +
     'Note that dynamic directive argument cannot contain spaces.',
   [ErrorCodes.X_MISSING_DIRECTIVE_NAME]: 'Legal directive name was expected.',
+  [ErrorCodes.X_TEMPLATE_NOT_ROOT]:
+    `<template v-slot> can only appear at the root level inside ` +
+    `the receiving component`,
 
   // transform errors
   [ErrorCodes.X_V_IF_NO_EXPRESSION]: `v-if/v-else-if is missing expression.`,

packages/compiler-core/src/transform.ts

@@ -30,7 +30,12 @@ import {
   isArray,
   isString,
 } from '@vue/shared'
-import { defaultOnError, defaultOnWarn } from './errors'
+import {
+  ErrorCodes,
+  createCompilerError,
+  defaultOnError,
+  defaultOnWarn,
+} from './errors'
 import {
   CREATE_COMMENT,
   FRAGMENT,
@@ -496,6 +501,15 @@ export function createStructuralDirectiveTransform(
       // structural directive transforms are not concerned with slots
       // as they are handled separately in vSlot.ts
       if (node.tagType === ElementTypes.TEMPLATE && props.some(isVSlot)) {
+        if (
+          context.parent &&
+          'tagType' in context.parent &&
+          context.parent.tagType !== ElementTypes.COMPONENT
+        ) {
+          context.onError(
+            createCompilerError(ErrorCodes.X_TEMPLATE_NOT_ROOT, node.loc),
+          )
+        }
         return
       }
       const exitFns = []

packages/compiler-dom/src/errors.ts

@@ -21,7 +21,7 @@ export function createDOMCompilerError(
 }
 
 export enum DOMErrorCodes {
-  X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
+  X_V_HTML_NO_EXPRESSION = 54 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
   X_V_TEXT_NO_EXPRESSION,
   X_V_TEXT_WITH_CHILDREN,