CODEWITHSUNDEEP
typescriptvue.jseslint
Elias
Elias

Reputation: 4141

'components' is not defined (no-undef)

Just added vue to an existing project and I'm getting a weird linting error:

error: 'components' is not defined (no-undef) at src/App.vue:13:3:
  11 | 
  12 | @Component({
> 13 |   components: { HelloWorld },
     |   ^
  14 | })
  15 | export default class App extends Vue {}
  16 | </script>

This also happens for every other attribute I add the object.

Eslint config

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "@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",
    "@typescript-eslint/explicit-member-accessibility": ["error"],
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        mocha: true,
      },
    },
  ],
};

Package.json

    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",

Typescript

I'm using typescript if that's of any concern.

Upvotes: 0

Views: 5052

Answers (2)

Niccol&#242; Di Chio
Niccol&#242; Di Chio

Reputation: 36

There was an issue open on the typescript-eslint repo.

https://github.com/typescript-eslint/typescript-eslint/issues/2942

After upgrading with yarn upgrade, the issue disappeared

Upvotes: 2

Simon Backx
Simon Backx

Reputation: 1372

I think this is a bug in no-undef with TypeScript. I couldn't find any information about it, but this solved the issue for me. It thinks 'components' is a variable instead of a property name. Use "components" instead:

@Component({
    "components": { HelloWorld },
})
export default class App extends Vue {}

Upvotes: 0

Related Questions