[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.