Template Interpolation Issue - First letter not recognized in event variable assignment #1319

xon52 · 2019-06-06T04:23:41Z

Info

Platform: Win
Vetur version: 0.21.0
VS Code version: 1.35.0

Problem

When entering a data property into an event, it ignores the first letter and so persistently reports that the property does not exist. This error can be removed by surrounding the statement in curly brackets, but that creates a bigger Vue error.

Reproducible Case

Turn Template Interpolation Service on and write the following code:

<template>
	<span @click="eg = true">Test</span>
</template>

<script>
export default {
	data() {
		return {
			eg: false
		}
	}
}
</script>

The text was updated successfully, but these errors were encountered:

ktsn · 2019-06-15T04:58:41Z

I just copied & pasted your reproducible case but cannot reproduce on my local. Could you provide full contained repro by cloning and modifying Veturpack?

xon52 · 2019-06-15T14:11:56Z

So using a Veturpack repo I could not reproduce the issue above. Then I tried my example above again and I didn't have the issue anymore. Then I tried everything I could do to get that error in a new project and couldn't... So probably another interaction issue. Not really sure how else to test.

However, incase this does come up later, I have made a couple more observations.

The issue above can be removed in a couple ways:

If the @click property is modified using Event Modifiers
If there are multiple properties for the element, and you include one or more on the same line as the @click:

Both are really strange, so I hope you can see a link between those observations and the vetur code I don't!

ktsn · 2019-06-15T14:28:14Z

That's weird... Even there is multi-lined attribute element, its v-on handler works fine for me.

By the way, what can you see when you execute a command Vetur: show corresponding virtual file and source map? (please copy and paste the result)

xon52 · 2019-06-16T00:03:02Z

OK I found the command vetur.showCorrespondingVirtualFile... But just for fun let's pretend I don't know how to run that command - how would I do that?

ktsn · 2019-06-16T01:07:03Z

Open command palette (by Ctrl + Shif + P), and type search word (e.g. vetur virtual). Then the command will be suggested on Editor, then click it or press enter.

xon52 · 2019-06-16T09:41:13Z

Thanks. Unfortunately, doesn't say much:

ekulabuhov · 2019-07-07T20:10:01Z

Hey! I've a similar issue. Both SourceMap and compiled version shows broken variable name:

Is there anything else I could do to help diagnose the problem?

imdbere · 2019-07-23T18:41:23Z

I have the exact same problem. Would be happy to help if there is any additional information i could provide

ktsn · 2019-07-30T06:02:42Z

This may be solved by this PR #1335

rille111 · 2019-11-15T10:49:54Z

Still same problem. Using vuetify. Doesnt seem to be the same problems in other projects, weirdly enough.

chartinger · 2020-01-13T22:03:30Z

I have the same problem. Running test:int (Windows 10, node 12.13.1, yarn 1.21.1, VSCode used by testrunner 1.41.1) on commit 26ab1b0 correctly results in a failed test in 1) Shows template diagnostics for v-on.vue:

1 failing                                                                                                  
1) Should find template-diagnostics in <template> region                                                   
     Shows template diagnostics for v-on.vue:                                                              
                                                                                                           
    AssertionError [ERR_ASSERTION]: Expected diagnostics length is not same as actual diagnostics one      
    + expected - actual                                                                                    
                                                                                                           
    -4                                                                                                     
    +7

The 3 extra errors seem to be the "off-by-first character" errors. (They are shown when opening the file with the my "normal" VSCode)

Edit: expected and actual are in the wrong order (https://github.com/vuejs/vetur/blob/master/test/interpolation/diagnostics/helper.ts#L17)

chartinger · 2020-01-14T18:01:43Z

The problem is related to the configured line endings. Switching VS Code to LF and it works as expected, CRLF results in the error.

octref · 2020-02-14T05:43:23Z

I got a repro while trying to reenable Windows CI: https://dev.azure.com/octref/Vetur/_build/results?buildId=960&view=logs&j=022b0a5d-2698-5f72-7610-a845972a8b4c&t=af0b5d72-a8ff-57fd-7b7c-b5fc756da7a6

octref · 2020-02-14T06:57:24Z

vuejs/vue-eslint-parser#59 is the upstream issue. expression is off by 1 when using CRLF.

I can only suggest using LF now, I don't have a whole afternoon to dive into the eslint parser...

sethidden · 2020-04-23T09:08:11Z

I tried to force LF in a project I was setting up at work and it's problematic. Mainly because Git will by default change line endings to CRLF on Windows even if they were saved as LF during cloning the repo.

I haven't been able to override these Git settings using a config file commited to the repo (eg. .gitattributes). It's supposedly possible to do git config --global core.eol lf but telling every developer after cloning the project "yeah just do git config --global core.eol lf or else prettier will be complaining to you" is a pain

octref · 2020-06-07T08:25:17Z

Waiting for the upstream PR: vuejs/vue-eslint-parser#74

lanyizi · 2020-08-23T16:28:22Z

Before upstream fixes this, another workaround could be wrapping the assignment in a function.
This is useful when you do want to keep each event on its own line to keep readability (or if your auto formatter does this)
The insertion of code (which causes this issue) only happens when the attribute value is a statement, and vue-eslint-parser will try to insert void function($event){ and then recalculate (a presumably wrong) offset, which will then cause the issue.

If you don't want to write a dedicated vue method for your statement, you can wrap your statement inside a lambda, for example

<span
  @click="() => eg = false"
/>

stevenarm · 2020-10-04T21:46:05Z

I have this issue as well. Would be happy to help or post code if needed. I am Vetur v0.28.0 and VS Code 1.49.3

octref · 2020-10-06T04:16:20Z

I'll merge vuejs/vue-eslint-parser#74 to my branch and publish it, so I can depend on it.

@ota-meshi Thanks for your work! Do you think we can keep a fork active together until @mysticatea is less busy and can get back to vue-eslint-parser?

octref · 2020-10-07T13:59:17Z

Does this still repro for you? I cannot repro in latest version. CI cannot detect this error as well:

https://github.com/vuejs/vetur/runs/1218328035

This file with CRLF: https://github.com/vuejs/vetur/blob/1319/test/interpolation/fixture/diagnostics/crlf/crlf.vue

Triggers this error:

[
  {
    "severity": "Error",
    "message": "Property 'egg' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'.",
    "range": [
      {
        "line": 1,
        "character": 16
      },
      {
        "line": 1,
        "character": 19
      }
    ],
    "source": "Vetur",
    "code": 2339
  }
]

ota-meshi · 2020-10-07T16:09:40Z

Do you think we can keep a fork active together

@octref Sure.
And I'm actually contacting him via Discord now and waiting for his reply.

ota-meshi · 2020-10-12T10:45:33Z

I was able to contact him.
Then, I merged and released a fix for the CRLF issue.

https://www.npmjs.com/package/vue-eslint-parser/v/7.1.1
https://github.com/mysticatea/vue-eslint-parser/releases/tag/v7.1.1

This is my first release so please let me know if you have any issues.

octref · 2020-10-12T13:25:14Z

@ota-meshi Thanks a ton! I pulled it in and it works great during my test. Thanks for reviving vue-eslint-parser.

bestickley · 2020-10-14T18:10:03Z

I'm still having an issue with this.

Vetur 0.28.0
Related node modules:
"@typescript-eslint/eslint-plugin": "^4.4.1",
"@typescript-eslint/parser": "^4.4.1",
"@vue/cli-plugin-babel": "^4.5.7",
"@vue/cli-plugin-eslint": "^4.5.7",
"@vue/cli-plugin-typescript": "^4.5.7",
"@vue/cli-plugin-unit-jest": "^4.5.7",
"@vue/cli-service": "^4.5.7",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^1.1.0",
"eslint": "^7.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.1",

yoyo930021 · 2020-10-15T00:56:45Z

I'm still having an issue with this.

Vetur 0.28.0
Related node modules:
"@typescript-eslint/eslint-plugin": "^4.4.1",
"@typescript-eslint/parser": "^4.4.1",
"@vue/cli-plugin-babel": "^4.5.7",
"@vue/cli-plugin-eslint": "^4.5.7",
"@vue/cli-plugin-typescript": "^4.5.7",
"@vue/cli-plugin-unit-jest": "^4.5.7",
"@vue/cli-service": "^4.5.7",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^1.1.0",
"eslint": "^7.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.1",

This fix is not release now.

stvoidmain · 2020-10-24T12:40:54Z

Before upstream fixes this, another workaround could be wrapping the assignment in a function.
This is useful when you do want to keep each event on its own line to keep readability (or if your auto formatter does this)
The insertion of code (which causes this issue) only happens when the attribute value is a statement, and vue-eslint-parser will try to insert void function($event){ and then recalculate (a presumably wrong) offset, which will then cause the issue.

If you don't want to write a dedicated vue method for your statement, you can wrap your statement inside a lambda, for example
<span
  @click="() => eg = false"
/>

Using a lambda work nicely to avoid the error and keep readability, thanks.

ktsn added the need-more-info label Jun 15, 2019

ekulabuhov mentioned this issue Jul 24, 2019

Expression missing two characters vuejs/vue-eslint-parser#50

Closed

octref added bug windows and removed need-more-info labels Feb 14, 2020

octref added the upstream label Jun 7, 2020

octref removed the windows label Jun 7, 2020

octref mentioned this issue Jun 8, 2020

error 2551 depending on indent (and it shouldn't even occur here) #1809

Closed

3 tasks

amoshydra mentioned this issue Aug 2, 2020

Cannot find name slotVariable when using v-slot in component, in multiple lines #2094

Closed

3 tasks

triforcely mentioned this issue Aug 27, 2020

Interpolation diagnostic sometimes removes first character of attribute value #2200

Closed

3 tasks

lcysgsg mentioned this issue Sep 28, 2020

add: editorconfig can help maintain style. lcysgsg/uni-app-kit#2

Merged

octref closed this as completed in 062d747 Oct 12, 2020

octref mentioned this issue Oct 31, 2020

"Cannot find name" and other problems with TypeScript-SFC #1388

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Template Interpolation Issue - First letter not recognized in event variable assignment #1319

Template Interpolation Issue - First letter not recognized in event variable assignment #1319

xon52 commented Jun 6, 2019 •

edited

Loading

ktsn commented Jun 15, 2019

xon52 commented Jun 15, 2019 •

edited

Loading

ktsn commented Jun 15, 2019

xon52 commented Jun 16, 2019

ktsn commented Jun 16, 2019

xon52 commented Jun 16, 2019

ekulabuhov commented Jul 7, 2019

imdbere commented Jul 23, 2019

ktsn commented Jul 30, 2019

rille111 commented Nov 15, 2019

chartinger commented Jan 13, 2020 •

edited

Loading

chartinger commented Jan 14, 2020 •

edited

Loading

octref commented Feb 14, 2020

octref commented Feb 14, 2020

sethidden commented Apr 23, 2020

octref commented Jun 7, 2020

lanyizi commented Aug 23, 2020

stevenarm commented Oct 4, 2020 •

edited

Loading

octref commented Oct 6, 2020

octref commented Oct 7, 2020

ota-meshi commented Oct 7, 2020 •

edited

Loading

ota-meshi commented Oct 12, 2020

octref commented Oct 12, 2020 •

edited

Loading

bestickley commented Oct 14, 2020 •

edited

Loading

yoyo930021 commented Oct 15, 2020 •

edited

Loading

stvoidmain commented Oct 24, 2020

Template Interpolation Issue - First letter not recognized in event variable assignment #1319

Template Interpolation Issue - First letter not recognized in event variable assignment #1319

Comments

xon52 commented Jun 6, 2019 • edited Loading

Info

Problem

Reproducible Case

ktsn commented Jun 15, 2019

xon52 commented Jun 15, 2019 • edited Loading

ktsn commented Jun 15, 2019

xon52 commented Jun 16, 2019

ktsn commented Jun 16, 2019

xon52 commented Jun 16, 2019

ekulabuhov commented Jul 7, 2019

imdbere commented Jul 23, 2019

ktsn commented Jul 30, 2019

rille111 commented Nov 15, 2019

chartinger commented Jan 13, 2020 • edited Loading

chartinger commented Jan 14, 2020 • edited Loading

octref commented Feb 14, 2020

octref commented Feb 14, 2020

sethidden commented Apr 23, 2020

octref commented Jun 7, 2020

lanyizi commented Aug 23, 2020

stevenarm commented Oct 4, 2020 • edited Loading

octref commented Oct 6, 2020

octref commented Oct 7, 2020

ota-meshi commented Oct 7, 2020 • edited Loading

ota-meshi commented Oct 12, 2020

octref commented Oct 12, 2020 • edited Loading

bestickley commented Oct 14, 2020 • edited Loading

yoyo930021 commented Oct 15, 2020 • edited Loading

stvoidmain commented Oct 24, 2020

xon52 commented Jun 6, 2019 •

edited

Loading

xon52 commented Jun 15, 2019 •

edited

Loading

chartinger commented Jan 13, 2020 •

edited

Loading

chartinger commented Jan 14, 2020 •

edited

Loading

stevenarm commented Oct 4, 2020 •

edited

Loading

ota-meshi commented Oct 7, 2020 •

edited

Loading

octref commented Oct 12, 2020 •

edited

Loading

bestickley commented Oct 14, 2020 •

edited

Loading

yoyo930021 commented Oct 15, 2020 •

edited

Loading