Vetur: Cannot find name slotVariable when using v-slot in component, in multiple lines

Created on 2 Aug 2020 · 3Comments · Source: vuejs/vetur

[x] I have searched through existing issues
[x] I have read through docs
[x] I have read FAQ

Info

Platform: Win
Vetur version: 0.25.0
VS Code version: 1.47.3 & 1.48.0-insider

Problem

Output > Vue Language Server

No error

Problems

{
    "resource": "retracted:/test-vetur/componentA.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "2304",
    "severity": 8,
    "message": "Cannot find name 'slotVariable'.",
    "source": "Vetur",
}

Description

Error with detecting slot's variables with when:

v-slot syntax is written directly on the component
v-slot syntax is written on the next line

See ComponentA in the screenshot below

Reproducible Case

❌ Code that reproduce the error

`ComponentA`

<template>
  <Parent
    v-slot="{ slotVariable }"
  >
    {{ slotVariable }}
  </Parent>
</template>

Virtual content

import __vlsComponent from "./ComponentA.vue";
import {
    __vlsRenderHelper,
    __vlsComponentHelper,
    __vlsIterationHelper
} from "vue-editor-bridge";
__vlsRenderHelper(__vlsComponent, function() {
    () => __vlsComponentHelper(this, "parent", {
        props: {},
        on: {},
        directives: []
    }, [slotVariable]);
});

✔ No error

`ComponentB`

<template>
  <Parent v-slot="{ slotVariable }">
    {{ slotVariable }}
  </Parent>
</template>

Virtual content

import __vlsComponent from "./ComponentA.vue";
import {
    __vlsRenderHelper,
    __vlsComponentHelper,
    __vlsIterationHelper
} from "vue-editor-bridge";
__vlsRenderHelper(__vlsComponent, function() {
    ({
        slotVariable
    }) => __vlsComponentHelper(this, "parent", {
        props: {},
        on: {},
        directives: []
    }, [slotVariable]);
});

`ComponentC`

<template>
  <Parent>
    <template v-slot="{ slotVariable }">
      {{ slotVariable }}
    <template>
  </Parent>
</template>

bug template-interpolation upstream

Source

amoshydra

All 3 comments

I found out that this issue only appear when the file is using CRLF.

And the error occurs in here:
https://github.com/vuejs/vetur/blob/271dbfcd9b1be62f847e6edf0041ee0775ee2f91/server/src/services/typescriptService/transformTemplate.ts#L588-L592

Using example for ComponentA

CRLF

{
  start: 36,
  end: 52,
  code: "<template>\r\n  <Parent\r\n    v-slot=\"{ slotVariable }\"\r\n  >\r\n    {{ slotVariable }}\r\n  </Parent>\r\n            \n</template>",
  paramsStr: " slotVariable }\""
}

LF

{
  start: 33,
  end: 49,
  code: "<template>\n  <Parent\n    v-slot=\"{ slotVariable }\"\n  >\n    {{ slotVariable }}\n  </Parent>\n           \n</template>",
  paramsStr: "{ slotVariable }"
}

amoshydra on 2 Aug 2020

👍1

I think this should be related to vue-eslint-parser