Skip to content

A lot of no-undef in Vue @Component decorators after parser update #2942

Closed
@Maxim-Mazurok

Description

@Maxim-Mazurok
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.
  • I have read the FAQ and my problem is not listed.

Repro

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

App.vue:

@Component({
  components: {
    AppBar,
  },
})

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "jest", "vuetify"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

Expected Result

When I use "@typescript-eslint/parser": "4.13.0" - tests are passing, no lining errors.

Actual Result
When I use "@typescript-eslint/parser": "4.14.0" - tests are failing, because of the lining errors:

> vue-cli-service lint **/*.{js,jsx,vue,ts,tsx,json} "--no-fix" "--max-warnings" "0"

error: 'components' is not defined (no-undef) at src/App.vue:48:3:
  46 | 
  47 | @Component({
> 48 |   components: {
     |   ^
  49 |     AppBar,
  50 |   },
  51 |   data: (): {


error: 'data' is not defined (no-undef) at src/App.vue:51:3:
  49 |     AppBar,
  50 |   },
> 51 |   data: (): {
     |   ^
  52 |     tabs: InterfaceTab[];
  53 |     cssVars: { "--min-drawer-width": string };
  54 |   } => ({


error: 'tabs' is not defined (no-undef) at src/App.vue:52:5:
  50 |   },
  51 |   data: (): {
> 52 |     tabs: InterfaceTab[];
     |     ^
  53 |     cssVars: { "--min-drawer-width": string };
  54 |   } => ({
  55 |     tabs: Object.keys(topLevelTabs).map((x) => ({

Additional Info

Versions

package version
@typescript-eslint/parser 4.14.0
TypeScript 4.1.3
ESLint 7.18.0
node 14.15.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingpackage: parserIssues related to @typescript-eslint/parser

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions