Skip to content

v-for is not parsed correctly when ecmaVersion is set to 5 #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dumptyd opened this issue Dec 23, 2020 · 0 comments · Fixed by #96
Closed

v-for is not parsed correctly when ecmaVersion is set to 5 #93

dumptyd opened this issue Dec 23, 2020 · 0 comments · Fixed by #96

Comments

@dumptyd
Copy link

dumptyd commented Dec 23, 2020

We are trying to introduce Vue into our legacy ES5 codebase and this is proving to be a blocker so any help with this would be greatly appreciated.

It's pretty much this issue but it seems like it was never reported here.
vuejs/eslint-plugin-vue#1089

I've been working on setting up Vue support for eslint in a repo where we use ES5, and the Vue plugin doesn't work well with eslint's ES5 mode.

Installing the Vue plugin silently overwrites certain settings: ecmaVersion is set to 2018, sourceType to module, and JSX is enabled. This caused us to accidentally disable enforcement of our "no ES6" rule for about a month until I found out.

I tried to remedy this by changing these settings back in our .eslintrc.json, but that causes strange errors and even crashes to happen when linting templates that use v-for.

Tell us about your environment

  • ESLint version: 6.8.0
  • eslint-plugin-vue version: 6.1.2
  • Node version: 10.15.2

Please show your full configuration:

{
	"extends": [
		"plugin:vue/recommended"
	],
	"parserOptions": {
		"ecmaVersion": 6,
		"sourceType": "script",
		"ecmaFeatures": {
			"jsx": false
		}
	}
}

What did you do?
First file (simple v-for):

<template>
  <div class="foo">
    <p
      v-for="x in xs"
      :key="x"
    >
      {{ x }}
    </p>
  </div>
</template>

Second file (v-for using parens to get both the value and the index):

<template>
  <div class="foo">
    <p
      v-for="(x, index) in xs"
      :key="index"
    >
      {{ x }}
    </p>
  </div>
</template>

What did you expect to happen?
Both of these files should lint without errors, even in ES5 mode (ecmaVersion: 5 in the eslint config).

What actually happened?
For the first file, I get confusing errors about the v-for line:

  4:7   error  'v-for' directives require that attribute value                                                  vue/valid-v-for
  4:14  error  Parsing error: Unexpected token x                                                                vue/no-parsing-error
  5:7   error  Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive  vue/valid-v-for

For the second file, I get an error message that exposes a JS error / crash in the plugin code, without reference to a line number:

  0:0  error  Parsing error: Cannot read property 'block' of undefined

Both of these errors only happen if ecmaVersion: 5 is set. If I set ecmaVersion: 6, the errors go away.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant