Why isn't my Ionic React app linter producing any output?

Question

I'm building an Ionic 7, React 18 app. I want to occasionally run linting, using eslint, but am currently not getting any output.

$ npm run lint

> [email protected] lint
> eslint

Here's my package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test.e2e": "cypress run",
    "test.unit": "vitest",
    "lint": "eslint"
  },
  "dependencies": {
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.5.0",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/react": "^7.0.0",
    "@ionic/react-router": "^7.0.0",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^1.5.1",
    "dotenv": "^16.3.1",
    "ionicons": "^7.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
    "swiper": "^10.3.1"
  },
  "devDependencies": {
    "@capacitor/cli": "5.5.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^6.9.0",
    "@typescript-eslint/parser": "^6.9.0",
    "@vitejs/plugin-legacy": "^4.0.2",
    "@vitejs/plugin-react": "^4.0.1",
    "cypress": "^12.7.0",
    "eslint": "^8.52.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "^3.0.0",
    "jsdom": "^22.1.0",
    "typescript": "^5.1.6",
    "vite": "^4.3.9",
    "vitest": "^0.32.2"
  },
  "description": "An Ionic project"
}

and here's my .eslintrc.js file

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  extends: ['react-app'],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
      }
    ]
  },
};

What else do I need to configure to get my linter to run?

Edit: Adding error output in response to answer given ...

> [email protected] lint
> eslint --fix *.{ts,tsx,json,md} src/** lib/**


Oops! Something went wrong! :(

ESLint: 8.52.0

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/davea/Documents/workspace/myproject/frontend/.eslintrc.js from /Users/davea/Documents/workspace/myproject/frontend/node_modules/@eslint/eslintrc/dist/eslintrc.cjs not supported.
.eslintrc.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename .eslintrc.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/davea/Documents/workspace/myproject/frontend/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at module.exports [as default] (/Users/davea/Documents/workspace/myproject/frontend/node_modules/import-fresh/index.js:32:59)
    at loadJSConfigFile (/Users/davea/Documents/workspace/myproject/frontend/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2574:47)
    at loadConfigFile (/Users/davea/Documents/workspace/myproject/frontend/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2658:20)
    at ConfigArrayFactory.loadInDirectory (/Users/davea/Documents/workspace/myproject/frontend/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2868:34)
    at CascadingConfigArrayFactory._loadConfigInAncestors (/Users/davea/Documents/workspace/myproject/frontend/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3860:46)
    at CascadingConfigArrayFactory.getConfigArrayForFile (/Users/davea/Documents/workspace/myproject/frontend/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3781:18)
    at FileEnumerator._iterateFilesWithFile (/Users/davea/Documents/workspace/myproject/frontend/node_modules/eslint/lib/cli-engine/file-enumerator.js:368:43)
    at FileEnumerator._iterateFiles (/Users/davea/Documents/workspace/myproject/frontend/node_modules/eslint/lib/cli-engine/file-enumerator.js:349:25)
    at FileEnumerator.iterateFiles (/Users/davea/Documents/workspace/myproject/frontend/node_modules/eslint/lib/cli-engine/file-enumerator.js:299:59)
    at iterateFiles.next (<anonymous>)
    at CLIEngine.executeOnFiles (/Users/davea/Documents/workspace/myproject/frontend/node_modules/eslint/lib/cli-engine/cli-engine.js:797:48)
    at ESLint.lintFiles (/Users/davea/Documents/workspace/myproject/frontend/node_modules/eslint/lib/eslint/eslint.js:551:23)
    at Object.execute (/Users/davea/Documents/workspace/myproject/frontend/node_modules/eslint/lib/cli.js:402:36)
    at async main (/Users/davea/Documents/workspace/myproject/frontend/node_modules/eslint/bin/eslint.js:146:24)

Edit 2: In response to the other answer given ...

$ npm run lint

> [email protected] lint
> eslint --fix *.{ts,tsx,json} src/** lib/**

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.2.0

YOUR TYPESCRIPT VERSION: 5.2.2

Please only submit bug reports when using the officially supported version.

=============

Oops! Something went wrong! :(

ESLint: 8.52.0

No files matching the pattern "*.tsx" were found.
Please check for typing mistakes in the pattern.

Notice though that there are actually many files that end in ".tsx" ...

$ ls src/pages/
ConfirmEmailPage.tsx  Home.tsx              LoginPage.tsx         OrderSender.tsx       
Home.css              Home2.tsx             OrderSender.css       SignUpPage.tsx 

Answer 1

I think your command in package.json needs to tell eslint which files it should lint. It never used to everything if you don't tell it where to look.

Try changing it to something like this:

    "lint": "eslint *.js src/* --color",

or

    "lint": "eslint --fix *.{js,json,md} src/** lib/**",

Answer 2

There's conflict between the type:"module" setting in your package.json. eslint is trying to load your .eslintrc.js as CommonJS module and throws an error because it expects the file to use the import statement instead of require(). Reference

You should do like @David said. But when you change and error..

Because this is a React/Ionic project, the file extensions are Typescript. Even so, changing my command to '"lint": "eslint --fix .{ts,tsx,json,md} src/* lib/**"' results in the errors.

Then, make sure that your .eslintrc.js file is renamed to .eslintrc.cjs so that eslint treat file as CommonJS and allow you to use require().

Be sure that your lint config should like below:

"scripts": {
    ...
    "lint": "eslint --fix *.{ts,tsx,json,md} src/** lib/**",
    ...
   }

If still error, maybe you should do the other way, so try to discard the above setting and change the type from "type": "module" to "type": "commonjs" to treat all .js files as CommonJS. This also means to use import to load other js files.