ESLint parserOptions.project has been set error but only with Vue CLI build, not with Vue CLI lint

Viewed 14

This is a common problem, but none of the many proposed solutions have helped. My issue is that ESLint works fine when run directly or via npm run lint, which uses the Vue CLI service. However, when running npm run build or npx vue-cli-service build (same with npm run serve), I get these errors:

  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/views/NotFound.vue.
The file must be included in at least one of the projects provided

I've tried putting the path to the tsconfig.json file in .eslintrc.js in various places (all shown here):

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: [
        '@company/standard-vue',
    ],
    rules: {
        '@typescript-eslint/no-explicit-any': 'off',
    },
    parserOptions: {
        project: ['/absolute/path/to/tsconfig.json']
    },
    overrides: [
        {
            files: [
                '**/*.vue',
            ],
            parserOptions: {
                project: ['/absolute/path/to/tsconfig.json']
            },
            rules: {
                'vue/multi-word-component-names': 'off',
            },
        },
    ],
};

And the result is invariably the same.

We do have a custom ESLint config that is packaged (referenced by @company/standard-vue). There is a base config, that looks like this:

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: [
        'eslint:recommended',
    ],
    parserOptions: {
        ecmaVersion: 2020,
    },
    ignorePatterns: [
        'dist/*',
    ],
    rules: {
        // elided for space
    },
    overrides: [
        {
            files: [
                '**/*.ts',
                '**/*.vue',  // ensure these rules also apply to Vue files if used with the @company/standard-vue config
            ],
            parserOptions: {
                project: [
                    './tsconfig.json',
                ],
            },
            parser: '@typescript-eslint/parser',
            plugins: [
                '@typescript-eslint',
            ],
            extends: [
                'plugin:@typescript-eslint/eslint-recommended',
            ],
            rules: {
                // elided for space
            },
        },
        {
            files: [
                '**/__tests__/*.{j,t}s?(x)',
                '**/tests/unit/**/*.spec.{j,t}s?(x)',
            ],
            env: {
                jest: true,
            },
        },
    ],
};

And a Vue-based config that inherits from that config and looks like this:

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        '@company/standard'
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    ignorePatterns: [
        'dist/*'
    ],
    rules: {

    },
    overrides: [
        {
            files: [
                '**/*.vue'
            ],
            parser: 'vue-eslint-parser',
            parserOptions: {
                parser: '@typescript-eslint/parser',
            },
            plugins: [
                'ext'
            ],
            extends: [
                'plugin:vue/essential',
                'plugin:vue/strongly-recommended',
                '@vue/typescript/recommended',
                '@vue/standard'
            ],
            rules: {
                // elided
            }
        }
    ]
};

Here is the tsconfig.json, which sits in the root directory of the Vue project:

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

As you can see, it clearly specifies the that these Vue files should be included.

I've tried putting project: ['/absolute/path/to/tsconfig.json'] in every parserOptions stanza in all of these files, but it changes nothing.

0 Answers
Related