Skip to content

False positive 'no-parsing-error' when using reserved keyword 'package' #95

Open
@schl3ck

Description

@schl3ck

Checklist

  • I checked the FAQ.

Tell us about your environment

  • ESLint version: 7.6.0
  • eslint-plugin-vue version: 6.2.2
  • Node version: 12.13.0
  • Operating System: Windows 10 Version 1803

Please show your full configuration:

module.exports = {
  root: true,

  env: {
    node: true,
  },

  extends: ["plugin:vue/essential", "eslint:recommended"],

  parserOptions: {
    parser: "babel-eslint",
  },

  rules: {
    indent: "off",
    "no-console": "off",
    "no-debugger": "off",
    "prettier/prettier": "off",
    "operator-linebreak": [
      "warn",
      "before",
      {
        overrides: {
          "=": "after",
          "*=": "after",
          "/=": "after",
          "%=": "after",
          "+=": "after",
          "-=": "after",
          "<<=": "after",
          ">>=": "after",
          ">>>=": "after",
          "&=": "after",
          "^=": "after",
          "|=": "after",
          "&&=": "after",
          "||=": "after",
          "??=": "after",
        },
      },
    ],
    "vue/no-unused-components": "warn",
    "vue/no-unused-vars": "warn",
    "vue/singleline-html-element-content-newline": "off",
    "vue/array-bracket-spacing": "error",
    "vue/arrow-spacing": "error",
    "vue/block-spacing": "error",
    "vue/brace-style": "error",
    "vue/camelcase": "error",
    "vue/comma-dangle": "error",
    "vue/component-definition-name-casing": "error",
    "vue/component-name-in-template-casing": "error",
    "vue/component-tags-order": [
      "error",
      { order: ["template", "script", "style"] },
    ],
    "vue/dot-location": "error",
    "vue/eqeqeq": "error",
    "vue/key-spacing": "error",
    "vue/keyword-spacing": "error",
    "vue/match-component-file-name": "error",
    "vue/max-len": [
      "error",
      {
        code: 80,
        tabWidth: 2,
        comments: 80,
        ignoreComments: true,
        ignoreTrailingComments: true,
        ignoreUrls: true,
        ignoreStrings: true,
        ignoreTemplateLiterals: true,
        ignoreRegExpLiterals: true,
      },
    ],
    "vue/max-attributes-per-line": [
      "error",
      {
        singleline: 10,
      },
    ],
    "vue/no-deprecated-scope-attribute": "error",
    "vue/no-deprecated-slot-attribute": "error",
    "vue/no-deprecated-slot-scope-attribute": "error",
    "vue/no-empty-pattern": "error",
    "vue/no-irregular-whitespace": "error",
    "vue/no-reserved-component-names": "error",
    "vue/no-unsupported-features": "error",
    "vue/object-curly-spacing": ["error", "always"],
    "vue/padding-line-between-blocks": "error",
    "vue/require-direct-export": "error",
    "vue/require-name-property": "error",
    "vue/script-indent": "off",
    "vue/space-infix-ops": "error",
    "vue/space-unary-ops": "error",
    "vue/v-on-function-call": "error",
    "vue/v-slot-style": "error",
    "vue/valid-v-bind-sync": "error",
    "vue/valid-v-slot": "error",
  },
};

What did you do?

I created a property called package and wanted to reference it in the teplate section, but it gives me the error no-parsing-error. The SFC compiles without problems though.

<template>
  <div>
    <h2>Package</h2>
    <b-card>
      <b-table-simple small>
        <tr>
          <th class="col-md-2 text-strong">Filename</th>
          <td>
            <FormatFilename
              v-if="hasData"
              :filename="package.filename"
              :downloadUrl="package.downloadUrl"
              :fileSize="package.fileSize"
            />
          </td>
        </tr>
      </b-table-simple>
    </b-card>
  </div>
</template>

<script>
import HTTP from "@/utils/http";
import FormatFilename from "@/components/FormatFilename.vue";
import backend from "@/utils/backend";

export default {
  name: "ViewPackage",
  props: {
    packageId: {
      type: Number,
      required: true,
    },
  },
  components: {
    FormatFilename,
  },
  data() {
    return {
      package: {},
    };
  },
  created() {
    HTTP.get("/packages/" + this.packageId).then((response) => {
      response.data.downloadUrl = backend.url(
        `/packages/${this.packageId}?download=1`
      );
      this.package = response.data;
    });
  },
  computed: {
    /** @returns {boolean} */
    hasData() {
      return Boolean(this.package.filename);
    },
  },
};
</script>

What did you expect to happen?
To not get any error, because compilation just works fine.

What actually happened?

  11:15  error  'v-bind' directives require an attribute value                                                     vue/valid-v-bind
  11:26  error  Parsing error: Line 1: Unexpected reserved word 'package'

> 1 | 0(package.filename)
    |   ^     vue/no-parsing-error
  12:15  error  'v-bind' directives require an attribute value                                                     vue/valid-v-bind
  12:29  error  Parsing error: Line 1: Unexpected reserved word 'package'

> 1 | 0(package.downloadUrl)
    |   ^  vue/no-parsing-error
  13:15  error  'v-bind' directives require an attribute value                                                     vue/valid-v-bind
  13:26  error  Parsing error: Line 1: Unexpected reserved word 'package'

> 1 | 0(package.fileSize)
    |   ^     vue/no-parsing-error

✖ 6 problems (6 errors, 0 warnings)

Repository to reproduce this issue
No repository, but simple steps:

  1. Create or open any SFC
  2. Add the property package to the object returned from data()
  3. Use the property in the template section

This error is also raised when I try it with other reserved future keywords.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions