error Parsing error: The keyword 'import' is reserved

[khalwat]

Version 1.3.0 of this plugin worked fine; I've updated to 1.8.1 to work with Vite 3, and whenever I do a build (the dev server works fine) I get:

 error  Parsing error: The keyword 'import' is reserved

My .eslintrc file is unchanged, and looks like this:

{
  "root": true,
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "no-undef": "off"
  },
  "env": {
    "browser": true,
    "amd": true,
    "node": true
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended"
  ]
}

It's almost like it's not properly reading in the .eslintrc during a production build...?

[khalwat]

Even putting this explicitly in my vite.config.ts doesn't help:

    eslintPlugin({
      cache: false,
      useEslintrc: true,
    }),

If I remove the plugin, everything builds fine. I can also run:

eslint './src/**/*.{js,ts,vue}' --fix

Directly and it all works/passes.

[gxmari007]

Can you provide a demo？

[eshankvaish-bs]

@gxmari007 I'm facing the same error with React, ESLint, and Vite. The issue occurs when I'm locally linking a react library to the Vite-based React web app. The plugin tends to parse the locally linked repo as well.

[michtio]

Same issue over here @gxmari007 It seems not to read the .eslintrc file on production build.

vite config:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import ViteRestart from 'vite-plugin-restart'
import viteCompression from 'vite-plugin-compression'
import manifestSRI from 'vite-plugin-manifest-sri'
import {visualizer} from 'rollup-plugin-visualizer'
import eslintPlugin from 'vite-plugin-eslint'
import {nodeResolve} from '@rollup/plugin-node-resolve'
import critical from 'rollup-plugin-critical'
import {ViteFaviconsPlugin} from 'vite-plugin-favicon2'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig(({command}) => ({
    base: command === 'serve' ? '' : '/dist/',
    build: {
        emptyOutDir: true,
        manifest: true,
        outDir: '../cms/web/dist',
        rollupOptions: {
            input: {
                app: 'src/js/app.ts',
                'lazysizes-wrapper': 'src/js/utils/lazysizes-wrapper.ts',
            },
            output: {
                sourcemap: true,
            }
        },
    },
    plugins: [
        critical({
            criticalUrl: 'https://hdac.be',
            criticalBase: '../cms/web/dist/criticalcss',
            criticalPages: [
                { uri: '/', template: 'index' }
            ],
            criticalConfig: {}
        }),
        legacy({
            targets: ['defaults', 'not IE 11']
        }),
        nodeResolve({
            modulePaths: [
                path.resolve('./node_modules'),
            ]
        }),
        ViteFaviconsPlugin({
            logo: './src/img/favicon-src.png',
            inject: false,
            outputPath: 'favicons',
        }),
        ViteRestart({
            reload: [
                './src/templates/**/*',
            ],
        }),
        vue(),
        viteCompression({
            filter: /\.(js|mjs|json|css|map)$/i
        }),
        manifestSRI(),
        visualizer({
            filename: '../src/web/dist/assets/stats.html',
            template: 'treemap',
            sourcemap: true,
        }),
        eslintPlugin({
            cache: false,
        })
    ],
    publicDir: './src/public',
    resolve: {
        alias: [
            {find: '~', replacement: path.resolve(__dirname, '../src')}
        ],
        preserveSymlinks: true,
    },
    server: {
        fs: {
            strict: false
        },
        host: '0.0.0.0',
        origin: 'http://localhost:5101',
        port: 5101,
        strictPort: true,
    }
}))

eslintrc file

{
    "root": true,
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "ecmaVersion": 2020,
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "vue/html-indent": [
            "error",
            4
        ]
    },
    "env": {
        "browser": true,
        "amd": true,
        "node": true
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-recommended"
    ]
}

app.ts file:

import App from '~/vue/App.vue'
import { createApp } from 'vue'

(nothing more than the above 2 lines)

[micahlt]

This remains an issue! It would be great if this could get some attention. I'm encountering this on a React project importing a local module from an NPM workspace.

[mthaak]

In my case, this problem was caused by ESLint being misconfigured for the locally linked library. By configuring it correctly (in particular by adding sourceType: "module", to its parserOptions) I could get this plugin to work!

This is the .eslintrc.js of the local library:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaFeatures: {
      jsx: true,
    },
    sourceType: "module",
    ecmaVersion: "2020",
  },
  ignorePatterns: ["dist/*", "node_modules/*"],
  plugins: ["@typescript-eslint"],
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
};