ESLint flat config (.eslint.config.js) throwing "Parsing error: The keyword 'import' is reserved"

Question

ESLint flat config (.eslint.config.js) throwing "Parsing error: The keyword 'import' is reserved"

Plugins: react, typescript (though removing both of them still doesnt solve the issue)

Parser: typescript

Config:

import react from "eslint-plugin-react"
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import typescriptParser from "@typescript-eslint/parser";
import globals from "globals";
import eslintRecomended from "eslint/conf/eslint-recommended"
import typescriptRecomended from "@typescript-eslint/eslint-plugin/dist/configs/recommended"
import reactRecomended from "eslint-plugin-react/configs/recommended"

export default [
  ...reactRecomended,
  ...typescriptRecomended,
  ...eslintRecomended,
  {
    files: [ "**/*.{js,jsx,mjs,cjs,ts,tsx}" ],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      parser: typescriptParser,
      parserOptions: {
          ecmaFeatures: {
            jsx: true,
          },
      },
      globals: {
        ...globals.browser,
      }
    },
    plugins: {
      react : react,
      "@typescript-eslint": typescriptEslint,
    },
    rules: {
      //rules here
    }
  }
]

ESLint Parsing error: The keyword 'import' is reserved on React default module import <-- Error in editor image.

package.json:

{
  "name": "dolist",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.9",
    "@mui/material": "^5.11.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.52.0",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.34.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
}

Using VSCode with ESLint extension v2.4.0 and Vite as the build tool if that could cause it.

I just tried switch from an .eslintrc config that was properly working. I tried removing both the extensions (which I know would cause other parsing errors) but the import keyword parsing error still remained.

Thank you for your time in advanced.

Answer 1

I did not do my research on if the extension actually supported the new config files.

I came across this issue on the official extension repository https://github.com/microsoft/vscode-eslint/issues/1518

I found that is requires a special experiment flag in your settings for VSCode and autocomplete revelead it there with "eslint.experimental.useFlatConfig": true, instead of the config listed at the top of the above issue.

After enabling it I received another error Key "globals": Global "AudioWorkletGlobalScope " has leading or trailing whitespace. from my ESLint. --> Key "globals" Error

I ran to the JSON for the window globals and, this looks like the few times in my programming career that source code released looks to be wrong instead of myself.

The globals release that comes with one of my packages, in the time of writing this, have a trailing whitespace in the AudioWorkletGlobalScope property as displayed here --> AudioWorkletGlobalScope property space in globals.json

I ended up just adding my own globals package to my project with npm install globals and restarted my ESLint server, which solved the globals issue, but I ran into other issues with finding the recommended for both the official eslint and typescript eslint.

Neither of these imports work.

import eslintRecomended from "eslint/conf/eslint-recommended"
import typescriptRecomended from "@typescript-eslint/eslint-plugin/dist/configs/recommended"

I also needed to add .js to reactRecommended input

import reactRecommended from "eslint-plugin-react/configs/recommended.js";

The new system wont let you repeat plugins either, which reactRecommended has, so I had to remove my react plugin from my config object as well.

Rather winded answer but there was a lot wrong. Such is using a new system you are going to run into some hiccups. I ended up with

import react from "eslint-plugin-react";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import typescriptParser from "@typescript-eslint/parser";
import globals from "globals";
import reactRecommended from "eslint-plugin-react/configs/recommended.js";

export default [
  reactRecommended,
  {
    files          : [ "**/*.{js,jsx,mjs,cjs,ts,tsx}" ],
    languageOptions: {
      ecmaVersion  : "latest",
      sourceType   : "module",
      parser       : typescriptParser,
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.browser,
      },
    },
    plugins: {
      "@typescript-eslint": typescriptEslint,
    },
    rules: {
      //rules here
    }
  }
]

Hope this helps someone!