fi3ework
Incompatible with eslint@9
Describe the bug
Build crashes when running with eslint@9 installed:
node:internal/event_target:1096
process.nextTick(() => { throw err; });
^
Error: Invalid Options:
- Unknown options: extensions, ignorePath, reportUnusedDisableDirectives, resolvePluginsRelativeTo, rulePaths, useEslintrc
- 'extensions' has been removed.
- 'resolvePluginsRelativeTo' has been removed.
- 'ignorePath' has been removed.
- 'rulePaths' has been removed. Please define your rules using plugins.
- 'reportUnusedDisableDirectives' has been removed. Please use the 'overrideConfig.linterOptions.reportUnusedDisableDirectives' option instead.
at processOptions (/path/to/proj/node_modules/eslint/lib/eslint/eslint-helpers.js:839:15)
at new ESLint (/path/to/proj/node_modules/eslint/lib/eslint/eslint.js:593:34)
at Object.configureServer (file:///path/to/proj/node_modules/vite-plugin-checker/dist/esm/checkers/eslint/main.js:73:18)
at MessagePort.<anonymous> (file:///path/to/proj/node_modules/vite-plugin-checker/dist/esm/worker.js:57:26)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:822:20)
at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28) {
code: 'ESLINT_INVALID_OPTIONS'
}
Node.js v21.7.2
error Command failed with exit code 1.
Reproduction
- yarn add -D eslint@^9
- Run vite with configured vite-plugin-checker
Expected behavior
Build should not crash when eslint@9 is installed.
System Info
System:
OS: macOS 14.4
CPU: (10) arm64 Apple M1 Pro
Memory: 495.78 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.7.2 - /usr/local/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 10.5.0 - /usr/local/bin/npm
pnpm: 8.6.7 - /usr/local/bin/pnpm
Watchman: 2024.01.22.00 - /usr/local/bin/watchman
Browsers:
Chrome: 124.0.6367.202
Safari: 17.4
Safari Technology Preview: 17.4
Additional context
No response
Validations
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
if you use FLAT CONFIG, specify to checker
plugins: [
checker({
eslint: {
useFlatConfig: true, // for me this fix the problem
lintCommand: "eslint 'src/scripts/**/*.ts'",
},
}),
],
useFlatConfig is not working for me. Still getting same error
checker({
typescript: true,
eslint: {
useFlatConfig: true,
lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
},
overlay: {
initialIsOpen: false,
},
}),
dependencies
"vite-plugin-checker": "^0.6.4",
"eslint": "^9.3.0",
It doesn't work with the ESLint 9.9.0 eslint.config.ts.
Using dev: { overrideConfig: { flags: ['unstable_ts_config'] } }, it simply ignores the flag.
Using lintCommand: 'eslint --flag unstable_ts_config' it says "unknown --flag, do I mean --fix?"
Edit: Looking into the code the typing says there is a flags, but in the code it is not used for eslint.
Only for the others like biome.
Seeing https://github.com/fi3ework/vite-plugin-checker/blob/b2c32367cf2e410154194d7730d8830aace898d9/packages/vite-plugin-checker/src/checkers/eslint/main.ts#L76C1-L78C13 Instead of
eslint = new FlatESLint({
cwd: root,
})
it should be as example for a hardcoded flag
eslint = new FlatESLint({
cwd: root,
flags: ['unstable_ts_config']
});
sooo there is the interpreting of the flags option completely missing.
And for the buildmode it needs fixes here https://github.com/fi3ework/vite-plugin-checker/blob/b2c32367cf2e410154194d7730d8830aace898d9/packages/vite-plugin-checker/src/checkers/eslint/main.ts#L171-L179
Because the mentioned eslint.dev.eslint in the docs doesn't seem to exist for eslint.
Only for biome.
It gets a bit more complicated as the options that are being sanitised aren't compatible between the two. I've started work on trying to fix this, but still running into issues. Here are my forked changes but they are not ready yet to get it to work
Error [ConfigError]: Config (unnamed): Key "env": This appears to be in eslintrc format rather than flat config format.
[0] at rethrowConfigError (xxx/node_modules/@eslint/config-array/dist/cjs/index.cjs:303:8)
[0] at xxx/node_modules/@eslint/config-array/dist/cjs/index.cjs:1098:5
[0] at Array.reduce (<anonymous>)
[0] at FlatConfigArray.getConfigWithStatus (xxx/node_modules/@eslint/config-array/dist/cjs/index.cjs:1091:43)
[0] ... 2 lines matching cause stack trace ...
[0] at async NodeHfs.<anonymous> (file:///xxx/node_modules/@humanfs/core/src/hfs.js:574:24)
[0] at async NodeHfs.walk (file:///xxx/node_modules/@humanfs/core/src/hfs.js:614:3)
[0] at async globSearch (xxx/node_modules/eslint/lib/eslint/eslint-helpers.js:327:26)
[0] at async Promise.allSettled (index 0)
https://github.com/fi3ework/vite-plugin-checker/compare/main...buggedcom:vite-plugin-checker:main
I didn't fix the issue but hardcoded the flag via a pnpm patch:
# TODO WORKAROUND UNTIL https://github.com/fi3ework/vite-plugin-checker/issues/320 IS RESOLVED
diff --git a/dist/cjs/checkers/eslint/main.js b/dist/cjs/checkers/eslint/main.js
index 7d08eef00a69b3089d0710d40b84de2cf0fd1f0d..a328789395d5f838c97342bd5ad3ae6b5a5ab70e 100644
--- a/dist/cjs/checkers/eslint/main.js
+++ b/dist/cjs/checkers/eslint/main.js
@@ -94,7 +94,8 @@ const createDiagnostic = (pluginConfig) => {
} = require2("eslint/use-at-your-own-risk");
if (shouldUseFlatConfig == null ? void 0 : shouldUseFlatConfig()) {
eslint = new FlatESLint({
- cwd: root
+ cwd: root,
+ flags: ['unstable_ts_config']
});
} else {
throw Error(
@@ -177,9 +178,9 @@ class EslintChecker extends import_Checker.Checker {
buildBin: (pluginConfig) => {
if (pluginConfig.eslint) {
const { lintCommand } = pluginConfig.eslint;
- return ["eslint", lintCommand.split(" ").slice(1)];
+ return ["eslint --flag unstable_ts_config", lintCommand.split(" ").slice(1)];
}
- return ["eslint", [""]];
+ return ["eslint --flag unstable_ts_config", [""]];
}
},
createDiagnostic
diff --git a/dist/esm/checkers/eslint/main.js b/dist/esm/checkers/eslint/main.js
index 2088f4de71ef1d02f1fad6f4b5a616f649b257bc..af3587ea7cab6410d60e616e81534b0a36446502 100644
--- a/dist/esm/checkers/eslint/main.js
+++ b/dist/esm/checkers/eslint/main.js
@@ -67,7 +67,8 @@ const createDiagnostic = (pluginConfig) => {
} = require2("eslint/use-at-your-own-risk");
if (shouldUseFlatConfig == null ? void 0 : shouldUseFlatConfig()) {
eslint = new FlatESLint({
- cwd: root
+ cwd: root,
+ flags: ['unstable_ts_config']
});
} else {
throw Error(
@@ -150,9 +151,9 @@ class EslintChecker extends Checker {
buildBin: (pluginConfig) => {
if (pluginConfig.eslint) {
const { lintCommand } = pluginConfig.eslint;
- return ["eslint", lintCommand.split(" ").slice(1)];
+ return ["eslint --flag unstable_ts_config", lintCommand.split(" ").slice(1)];
}
- return ["eslint", [""]];
+ return ["eslint --flag unstable_ts_config", [""]];
}
},
createDiagnostic
I'm not sure if it's related, but I was using this library with ESLint v8.57.1 without issues. However, when I switched to v9.13.0 with the flat config, it stopped updating lint errors on hot reload.
I've been keeping an eye on this issue for a while. When will it be resolved?
By follow this config, I passed above error
Error: Invalid Options:
- Unknown options: extensions, ignorePath, ...
And maybe you will get another issue, but I think it comes from another invalid config.
-> vite.config.tts
// Rest of code ...
eslint: {
useFlatConfig: true,
// Add `--config eslint.config.mjs`
lintCommand: 'eslint --config eslint.config.mjs "./src/**/*.{js,jsx,ts,tsx}"',
dev: { logLevel: ['error'] },
},
// Rest of code ...
-> eslint.config.mjs
export default tseslint.config(
{
// Rest of code...
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
projectService: true,
project: './tsconfig.json',
// Replace `tsconfigRootDir: import.meta.dirname`,
// Its fix one of issue I got after that
// Ref: https://typescript-eslint.io/getting-started/typed-linting#can-i-customize-the-tsconfig-used-for-typed-linting
},
},
...
settings: {
react: {
version: 'detect',
},
},
rules: {
// Config rules
},
}
);
Version
"eslint": "^9.16.0", "vite": "^6.0.1", "vite-plugin-checker": "^0.8.0"
I've been keeping an eye on this issue for a while. When will it be resolved?
Added the useFlatConfig option and modified the eslint.config.js to be compatible with version 9, and it works perfectly now
I had the same problem with this environment:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
!process.env.VITEST ? checker({
typescript: true,
eslint: {
lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
},
}) : undefined,
],
})
{
...
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.15.0",
"@types/node": "^22.10.1",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.15.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.12.0",
"postcss": "^8.4.49",
"postcss-scss": "^4.0.9",
"sass-embedded": "^1.82.0",
"stylelint": "^16.11.0",
"stylelint-config-standard-scss": "^14.0.0",
"stylelint-scss": "^6.10.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.15.0",
"vite": "^6.0.1",
"vite-plugin-checker": "^0.8.0"
}
}
import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [
js.configs.recommended,
...tseslint.configs.strictTypeChecked,
...tseslint.configs.stylisticTypeChecked,
],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
settings: {
react: { version: 'detect' },
},
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
"@typescript-eslint/no-non-null-assertion": 'off',
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
Added the useFlatConfig parameter and the problem has gone, but now I have a problem with stylelint. Too many build packages have been updated this year ;/
Recommend an optional and better plugin: https://github.com/ModyQyW/vite-plugin-eslint2 If you want to use the stylelint plugin: https://github.com/ModyQyW/vite-plugin-stylelint
The latest 0.9.0 version is still incompatible with eslint 9 Since eslint 8.x is not supported anymore, it would be much appreciated if you could add support for v9 Thanks a lot
Oh indeed. I managed to get it working with useFlatConfig: true
Thanks a lot for the tip !
Wondering what's my issue since useFlatConfig: true alone does not help.
Getting error
node:internal/event_target:1101
process.nextTick(() => { throw err; });
^
Error: Could not find config file.
//vite.config.ts
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import checker from "vite-plugin-checker"
const args = process.argv.slice(3)
const useChecker = args.includes("--use-checker")
export default defineConfig({
plugins: [
vue(),
useChecker &&
checker({
vueTsc: {
tsconfigPath: "./config/tsconfig.json",
},
eslint: {
lintCommand: "eslint . --config ./config/eslint.config.js",
useFlatConfig: true,
},
}),
],
root: "src",
publicDir: "public",
envDir: "../..",
build: {
outDir: "../dist",
emptyOutDir: true,
rollupOptions: {
input: "src/index.html",
},
},
server: {
port: 3000,
host: true,
strictPort: true,
watch: {
usePolling: true,
},
},
})
Mean while simply separately running npx eslint . --config ./config/eslint.config.js works just fine.
"devDependencies": {
"@eslint/js": "^9.22.0",
"@typescript-eslint/eslint-plugin": "^8.26.1",
"@typescript-eslint/parser": "^8.26.1",
"@vitejs/plugin-vue": "^5.2.1",
"eslint": "^9.22.0",
"eslint-plugin-prettier": "^5.2.3",
"eslint-plugin-vue": "^10.0.0",
"typescript": "5.8.2",
"vite": "^6.2.1",
"vite-plugin-checker": "^0.9.0",
"vue-eslint-parser": "^10.1.1",
"vue-tsc": "^2.2.8"
}
