[Bug]: If boolean props are in JSX, the react/jsx-no-literals rule in latest update(7.36.0) throws exception and breaks ESLINT

[aswinsekar]

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

If there is a boolean props in JSX, there is an exception thrown in processing this rule and eslint broke down.

<a isBoolean>test</a>

[Error - 15:46:51] TypeError: Cannot read properties of null (reading 'type')
Occurred while linting <file_name>
Rule: "react/jsx-no-literals"
at JSXAttribute (/node_modules/.pnpm/eslint-plugin-react@7.36.0_eslint@8.57.0/node_modules/eslint-plugin-react/lib/rules/jsx-no-literals.js:506:44)
at ruleErrorHandler (/node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/linter/linter.js:1076:28)
at /node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/linter/safe-emitter.js:45:58
at Array.forEach ()
at Object.emit (/node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

Happening in both CLI & IDE

Expected Behavior

No breakage in ESLINT setup

eslint-plugin-react version

v7.36.0

eslint version

v8.57.0

node version

v18.18.2

[kai-dorschner-twinsity]

Can confirm, same here

[kai-dorschner-twinsity]

For me it is still not solved unfortunately. The issue is marked as completed but as of "eslint-plugin-react": "7.37.1" it still appears

[ljharb]

@kai-dorschner-twinsity can you provide the code it’s crashing on?

[kai-dorschner-twinsity]

Unfortunately not, it is corporate code. Let me check if I can extract a few meaningful lines out of it.

Edit:

this is the eslint rule:

'react/jsx-no-literals': ['warn', { "noStrings": true, "elementOverrides": { "Button": { "noStrings": false, "applyToNestedElements": true } } }],

this is what's been thrown in the command line:

This is the line 150:

  // ...
  public async init() {
    for (const chunk of this.chunks) { // <------this is line 150
      await chunk.generateSha1Hash();
    }
  }
  // ...

where this.chunks is an array of objects.

If I comment out this method it will error in another (seemingly random) file with the same error message in the console as above:

function ready(fn: (event?: Event) => void) {
  if (document.readyState !== 'loading') return fn();
  document.addEventListener('DOMContentLoaded', fn);
}

ready(() => {
  let element; // <------ this line is where the error happens in the other file

  try {
    localStorage.getItem(null);
  } catch (error) {
    if (error.message === 'The operation is insecure.') {
      element = document.getElementById('safari-with-blocked-cookies-message');
    } else throw error;
  }

  if (!element) element = document.getElementById('unsupported-browser-message');
  if (!element) return;
  const classList = element.classList;

  classList.add('fade', 'show');
  classList.remove('d-none');
});

(this is the contents of the entire file)

eslint-plugin-react: "version": "7.37.2",

Here's the lines of eslint-plugin-react/lib/rules/jsx-no-literals.js:223:16

eslint-plugin-react/lib/rules/jsx-no-literals.js

Lines 216 to 233 in d1556a3

	/**
	* Determines if the given expression is a require statement. Supports
	* nested MemberExpresions. ie `require('foo').nested.property`
	* @param {ASTNode} node
	* @returns {boolean}
	*/
	function isRequireStatement(node) {
	if (node.type === 'CallExpression') {
	if (node.callee.type === 'Identifier') {
	return node.callee.name === 'require';
	}
	}
	if (node.type === 'MemberExpression') {
	return isRequireStatement(node.object);
	}
	return false;
	}