Types defined in custom global declaration files not inferred in vue files

[ozguruysal]

Hi, I'm not sure if this issue belongs to this repo or eslint-plugin-vue, but it does seem like a parsing issue.

Problem

Using VSCode, when we define global types in declaration files, those types are available in .ts files, however in *.vue files, eslint complains about them showing an error that says: 'XXX' is not defined.eslint(no-undef).

I have created a reproduction repo (branch) here.

1. Clone the repo, make sure you're in eslint-no-undef branch and install dependencies with yarn or npm install
2. Open project in VSCode.
3. Check files /src/types/config.d.ts, /src/main.ts and /src/App.vue. As you can see, interface IFoo is inferred in main.ts, however in App.vue, eslint shows an error

4. Downgrade typescript-eslint/parser to version 3 (example 3.10.1), reload or restart VSCode, now it works without any issues.

Expected

Global types should be inferred in .vue files just as in .ts files using typescript-eslint/parser v4+.

[Vannsl]

I don't have a solution, but can confirm I ran into the same problem today:

[AisonSu]

This is because the @typescript-eslint was specify some rules by overrides of eslintrc as these list down:

module.exports = {
    overrides: [
        {
            files: ['*.ts', '*.tsx'],
            rules: {
                'constructor-super': 'off',
                'getter-return': 'off',
                'no-const-assign': 'off',
                'no-dupe-args': 'off',
                'no-dupe-class-members': 'off',
                'no-dupe-keys': 'off',
                'no-func-assign': 'off',
                'no-import-assign': 'off',
                'no-new-symbol': 'off',
                'no-obj-calls': 'off',
                'no-redeclare': 'off',
                'no-setter-return': 'off',
                'no-this-before-super': 'off',
                'no-undef': 'off',
                'no-unreachable': 'off',
                'no-unsafe-negation': 'off',
                'no-var': 'error',
                'prefer-const': 'error',
                'prefer-rest-params': 'error',
                'prefer-spread': 'error',
                'valid-typeof': 'off', // ts(2367)
            },
        },
    ],
};

So when you lint your .vue,it will not use the rules it should use correctly, and i am investigating how to fix this.

The temporary solution is add the following to your .eslintrc.js

"overrides": [ {
      files:['src/**/*.vue'],
      rules: {
        'constructor-super': 'off',
        'getter-return': 'off',
        'no-const-assign': 'off',
        'no-dupe-args': 'off',
        'no-dupe-class-members': 'off',
        'no-dupe-keys': 'off',
        'no-func-assign': 'off',
        'no-import-assign': 'off',
        'no-new-symbol': 'off',
        'no-obj-calls': 'off',
        'no-redeclare': 'off',
        'no-setter-return': 'off',
        'no-this-before-super': 'off',
        'no-undef': 'off',
        'no-unreachable': 'off',
        'no-unsafe-negation': 'off',
        'no-var': 'error',
        'prefer-const': 'error',
        'prefer-rest-params': 'error',
        'prefer-spread': 'error',
        'valid-typeof': 'off', // ts(2367)
    }]

[huhm]

close the 'no-undef' rule, it's a temporary solution. Is there any eslint tools to conveniently get the final rules list?

[TheInvoker]

I ran into the same issue. Is there any status update for this?

[chenbr17]

I ran into the same issue.
When I changed .eslint rules field from an object to an array rules: {'no-undef': 2} -> rules: [{'no-undef': 2}], it disappears.

[ota-meshi]

You need to turn off the "no-undef" rule.

https://typescript-eslint.io/linting/troubleshooting/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors