[Bug]: TypeError: sourceCode.getAllComments is not a function

[developermau]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

I have built an app using Vite (^6.2.2), React (^19.0.0), Typescript(~5.7.2), ESLint (^9.23.0), and @eslint/css (^0.5.0).

I have this ESLint configuration file (eslint.config.js):

import { defineConfig } from 'eslint/config';
import globals from 'globals';
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import css from '@eslint/css';

export default defineConfig([
  {
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    languageOptions: { globals: globals.browser },
  },
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    plugins: { js },
    extends: ['js/recommended'],
  },
  tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  // lint css files
  {
    files: ['**/*.css'],
    plugins: {
      css,
    },
    language: 'css/css',
    rules: {
      'css/no-duplicate-imports': 'error',
    },
  },
]);

Also, I have some scripts on my package.json:

    "lint": "eslint .",
    "lint:debug": "eslint . --debug",

Unfortunately, I have an error:

> eslint .


Oops! Something went wrong! :(

ESLint: 9.23.0

TypeError: sourceCode.getAllComments is not a function
    at Object.getFromContext (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint-plugin-react/lib/util/pragma.js#cjs:54:33)
    at Components.componentRule (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint-plugin-react/lib/util/Components.js#cjs:288:29)
    at createRuleListeners (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint/lib/linter/linter.js#cjs:1134:15)
    at eval (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint/lib/linter/linter.js#cjs:1289:7)
    at Array.forEach (<anonymous>)
    at runRules (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint/lib/linter/linter.js#cjs:1203:31)
    at #flatVerifyWithoutProcessors (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint/lib/linter/linter.js#cjs:2290:22)
    at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint/lib/linter/linter.js#cjs:2381:43)
    at Linter._verifyWithFlatConfigArray (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint/lib/linter/linter.js#cjs:2484:15)
    at Linter.verify (file:///home/projects/vitejs-vite-uzwt6juz/node_modules/eslint/lib/linter/linter.js#cjs:1840:10)

The error happens when I run this command:

npm run lint

I tried to uninstall eslint-plugin-react, remove node_modules folder, and install all dependencies again but the error persists.

I have created a Stackblitz project. Please, I will appreciate your help.

Expected Behavior

If I remove the @eslint/css code on my eslint.config.js file, I do not have this error:

import { defineConfig } from 'eslint/config';
import globals from 'globals';
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';

export default defineConfig([
  {
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    languageOptions: { globals: globals.browser },
  },
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    plugins: { js },
    extends: ['js/recommended'],
  },
  tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  pluginReact.configs.flat['jsx-runtime'],
]);

Results:

eslint-plugin-react version

^7.37.4

eslint version

^9.23.0

node version

18.20.3

[ljharb]

you might need to put the tseslint config after the react ones, since the ts-eslint one sets the proper TS parser settings, but since it works when you remove the CSS rules, it's probably that the pragma util is erroring on .css files. I'll see if I can repro it (but if you have a repo, that'd be better)

[developermau]

Thanks @ljharb for your answering!

• Cleaned the initial CSS styles on my app (App.css, and index.css)
• Added some styles on App.css:

.special-title {
  color: #47c2fc;
}

• Updated my App.tsx

import './App.css';

export default function App() {
  return (
    <main>
      <h1 className="special-title">Hello!!!</h1>
    </main>
  );
}

• Update ESLint config

import { defineConfig } from 'eslint/config';
import globals from 'globals';
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import css from '@eslint/css';

export default defineConfig([
  {
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    languageOptions: { globals: globals.browser },
  },
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    plugins: { js },
    extends: ['js/recommended'],
  },
  pluginReact.configs.flat.recommended,
  pluginReact.configs.flat['jsx-runtime'],
  tseslint.configs.recommended,
  // lint css files
  {
    files: ['**/*.css'],
    plugins: {
      css,
    },
    language: 'css/css',
    rules: {
      'css/no-duplicate-imports': 'error',
    },
  },
]);

• App run

• Try again, ESLint check

npm run lint

Unfortunately, the error persisted.

• Created some things

1. Stackblitz: project
2. GitHub: Repository

Please, I will appreciate your help.

[ljharb]

@developermau your repro repo uses eslint-plugin-react-x, which is an entirely different plugin. This is for eslint-plugin-react. I'll leave this open tho since this issue references the correct plugin.

[developermau]

@developermau your repro repo uses eslint-plugin-react-x, which is an entirely different plugin. This is for eslint-plugin-react. I'll leave this open tho since this issue references the correct plugin.

@ljharb I am so sorry, but I cannot understand what you are talking about. Because I have installed eslint-plugin-react package in my project and part of the my error mentioned a file inside this package: TypeError: sourceCode.getAllComments is not a function at Object.getFromContext (file:///home/developermau/bug-eslint-001/node_modules/eslint-plugin-react/lib/util/pragma.js#cjs:54:33)

Then...

1. Do you ask me to uninstall eslint-plugin-react-hooks and eslint-plugin-react-refresh and try again? or
2. Should I create an issue to notify about this error in eslint-plugin-react-hooks by Facebook and eslint-plugin-react-refresh repositories?

Can you please give me more information about that I should do or next steps? I would appreciate it. I want to help, and fix this error, but not make more errors 😅 or generate confusion.

[bever1337]

I'm currently reproducing this. Unsure what @ljharb is saying about eslint-plugin-react-x.

Dependencies look like this:

"@eslint/js": "^9.24.0",
"eslint": "^9.24.0",
"eslint-plugin-react": "^7.37.5",
"typescript-eslint": "^8.29.1"

I started hacking on the eslint-plugin-react code at the error site and noticed it was failing to process markdown assets. I corrected the error by specifying files for the plugin:

// eslint.config.mjs

export default defineConfig([
  // ...more of my config
  { plugins: { react } },
  {
    ...react.configs.flat.recommended,
    files: ["**/*.{jsx?,mjsx?,cjsx?,tsx?}"],
  },
  {
    ...react.configs.flat["jsx-runtime"],
    files: ["**/*.{jsx?,mjsx?,cjsx?,tsx?}"],
  },
]);

[ljharb]

I'm not sure where I saw that other plugin mentioned; i don't see it now. Thanks, I'll take a look at the repro.

[bever1337]

Thanks for taking a second look 👀

[dmlogs]

I'm getting a similar error only after I add @eslint/json to my config as below. If I remove this block eslint skips json files.

{
    files: ["**/*.json"],
    language: "json/json",
    ignores: ["package-lock.json"],
    ...json.configs.recommended,
  },

I am importing eslint-plugin-react via eslint-config-expo/flat which is importing react plugin as per:
https://github.com/expo/expo/blob/main/packages/eslint-config-expo/flat/utils/react.js

Full error message:

ESLint: 9.26.0

TypeError: Error while loading rule 'react/display-name': sourceCode.getAllComments is not a function
Occurred while linting ./package.json
    at Object.getFromContext (./node_modules/eslint-plugin-react/lib/util/pragma.js:54:33)
    at Components.componentRule (./node_modules/eslint-plugin-react/lib/util/Components.js:288:29)
    at createRuleListeners (./node_modules/eslint/lib/linter/linter.js:1133:15)
    at ./node_modules/eslint/lib/linter/linter.js:1288:7
    at Array.forEach (<anonymous>)
    at runRules (./node_modules/eslint/lib/linter/linter.js:1202:31)
    at #flatVerifyWithoutProcessors (./node_modules/eslint/lib/linter/linter.js:2289:22)
    at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (./node_modules/eslint/lib/linter/linter.js:2380:43)
    at Linter._verifyWithFlatConfigArray (./node_modules/eslint/lib/linter/linter.js:2483:15)
    at Linter.verify (./node_modules/eslint/lib/linter/linter.js:1839:10)