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

packages/compiler-core/__tests__/transforms/vSlot.spec.ts

@@ -28,6 +28,7 @@ import { createObjectMatcher } from '../testUtils'
 import { PatchFlags } from '@vue/shared'
 import { transformFor } from '../../src/transforms/vFor'
 import { transformIf } from '../../src/transforms/vIf'
+import type { CompilerError } from '../../src/errors'
 
 function parseWithSlots(template: string, options: CompilerOptions = {}) {
  const ast = parse(template, {
@@ -928,6 +929,46 @@ describe('compiler: transform component slots', () => {
  },
  })
  })
+
+ test('error when v-slot used on non-root level <template>', () => {
+ const onError = vi.fn()
+
+ const { root } = parseWithSlots(
+ `<Bar><template><template #header> Header </template></template></Bar>`,
+ { onError },
+ )
+
+ expect(onError.mock.calls[0]).toMatchObject([
+ {
+ code: ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT,
+ loc: (root.children[0] as any).children[0].children[0].loc,
+ },
+ ])
+ })
+
+ test('error when v-slot used on non-root level <template> with v-if', () => {
+ const onError = vi.fn().mockImplementation((error: CompilerError) => {
+ throw error
+ })
+
+ expect(() => {
+ parseWithSlots(
+ `<Bar><template v-if="true"><template #header> Header </template></template></Bar>`,
+ { onError },
+ )
+ }).toThrow()
+
+ expect(onError.mock.calls[0]).toMatchObject([
+ {
+ code: ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT,
+ loc: {
+ start: { column: 28, line: 1, offset: 27 },
+ end: { column: 65, line: 1, offset: 64 },
+ source: '<template #header> Header </template>',
+ },
+ },
+ ])
+ })
  })
 
  describe(`with whitespace: 'preserve'`, () => {

packages/compiler-core/src/errors.ts

@@ -84,6 +84,7 @@ export enum ErrorCodes {
  X_V_SLOT_DUPLICATE_SLOT_NAMES,
  X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
  X_V_SLOT_MISPLACED,
+ X_V_SLOT_TEMPLATE_NOT_ROOT,
  X_V_MODEL_NO_EXPRESSION,
  X_V_MODEL_MALFORMED_EXPRESSION,
  X_V_MODEL_ON_SCOPE_VARIABLE,
@@ -172,6 +173,9 @@ export const errorMessages: Record<ErrorCodes, string> = {
  `Extraneous children found when component already has explicitly named ` +
  `default slot. These children will be ignored.`,
  [ErrorCodes.X_V_SLOT_MISPLACED]: `v-slot can only be used on components or <template> tags.`,
+ [ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT]:
+ `<template v-slot> can only appear at the root level inside ` +
+ `the receiving component`,
  [ErrorCodes.X_V_MODEL_NO_EXPRESSION]: `v-model is missing expression.`,
  [ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION]: `v-model value must be a valid JavaScript member expression.`,
  [ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,

packages/compiler-core/src/transforms/vSlot.ts

@@ -49,6 +49,19 @@ export const trackSlotScopes: NodeTransform = (node, context) => {
  (node.tagType === ElementTypes.COMPONENT ||
  node.tagType === ElementTypes.TEMPLATE)
  ) {
+ const { parent } = context
+ if (
+ node.tagType === ElementTypes.TEMPLATE &&
+ parent &&
+ (('tagType' in parent && parent.tagType !== ElementTypes.COMPONENT) ||
+ (parent.type && parent.type > NodeTypes.ELEMENT)) &&
+ node.props.some(isVSlot)
+ ) {
+ context.onError(
+ createCompilerError(ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT, node.loc),
+ )
+ }
+
  // We are only checking non-empty v-slot here
  // since we only care about slots that introduce scope variables.
  const vSlot = findDir(node, 'slot')

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,