Skip to content

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

New issue
New issue
Closed
#3823
Closed
[Bug]: If boolean props are in JSX, the react/jsx-no-literals rule in latest update(7.36.0) throws exception and breaks ESLINT#3820
#3823
Labels
bug
@aswinsekar

Description

@aswinsekar
aswinsekar
opened on Sep 12, 2024

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

Activity

aswinsekar
added
bug
on Sep 12, 2024
aswinsekar
changed the title [-][Bug]: If boolean props are in JSX, the latest update(7.36.0) throws exception[/-] [+][Bug]: If boolean props are in JSX, the latest update(7.36.0) throws exception and breaks ESLINT[/+] on Sep 12, 2024
aswinsekar
changed the title [-][Bug]: If boolean props are in JSX, the latest update(7.36.0) throws exception and breaks ESLINT[/-] [+][Bug]: If boolean props are in JSX, the react/jsx-no-literals rule in latest update(7.36.0) throws exception and breaks ESLINT[/+] on Sep 12, 2024
reosarevok
mentioned this on Sep 12, 2024
kai-dorschner-twinsity

kai-dorschner-twinsity commented on Sep 12, 2024

@kai-dorschner-twinsity
kai-dorschner-twinsity
on Sep 12, 2024

Can confirm, same here

ljharb
closed this as completedin #3823on Sep 12, 2024
kai-dorschner-twinsity

kai-dorschner-twinsity commented on Oct 18, 2024

@kai-dorschner-twinsity
kai-dorschner-twinsity
on Oct 18, 2024

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

ljharb commented on Oct 18, 2024

@ljharb
ljharb
on Oct 18, 2024
Member

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

kai-dorschner-twinsity

kai-dorschner-twinsity commented on Oct 25, 2024

@kai-dorschner-twinsity
kai-dorschner-twinsity
on Oct 25, 2024 · edited by 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:
Image

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @ljharb@aswinsekar@kai-dorschner-twinsity

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