jsx-max-depth: Maximum call stack size exceeded

[AriPerkkio]

Hello, jsx-max-depth rule seems to crash in certain cases. This issue was spotted by automated CI run - it is not blocking my development or anything. https://github.com/AriPerkkio/eslint-remote-tester/actions/runs/428814308

I checked those other RangerError issues and this doesn't look like a duplicate.

"eslint-plugin-react": "^7.21.5",

{
  "root": true,
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "16.13.1"
    }
  },
  "plugins": ["react"],
  "rules": {
    "react/jsx-max-depth": "error"
  }
}

Minimal repro:

This is really as far minimal as I could narrow it down.

import React, { Component } from 'react'

const MyComponent = () => <div />;

var A = { D: '' };

class B extends Component {
    C() {
        A = A;
    }

    render() {
      const { D } = A;
      return <MyComponent  D={D} />;
    }
}

RangeError: Maximum call stack size exceeded
Occurred while linting <text>:81
    at findJSXElementOrFragment (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:1:1)

Crash reports from real projects

Rule: jsx-max-depth

• Message: Maximum call stack size exceeded Occurred while linting <text>:81
• Path: neurahealth/neuracovid/src/components/Login/index.js
• Link

        const { t, i18n } = this.props;
        const { selectedOption } = lang
        if (localStorage.getItem(firebaseAuthKey) === '1')
        return <Splashscreen t={t} i18n={i18n}/>;
        return <LoginPage handleGoogleLogin={this.handleGoogleLogin} t={t} i18n={i18n} options={options} handleChange={this.handleChange} selectedOption={selectedOption} selectedOptionState={this.state.selectedOption}/>;
    }
}

const LoginPage = ({ handleGoogleLogin, t, i18n, handleChange, selectedOption, selectedOptionState }) => (

RangeError: Maximum call stack size exceeded
Occurred while linting <text>:81
    at findJSXElementOrFragment (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:1:1)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)
    at findJSXElementOrFragment(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:101:49)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)
    at findJSXElementOrFragment(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:101:49)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)
    at findJSXElementOrFragment(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:101:49)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)
    at findJSXElementOrFragment(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:101:49)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)

[ljharb]

The A = A part seems to be what triggers it; basically we don't have code to account for someone reassigning the same value to a variable. I can't figure out what triggers it in the real-world example, though.

Not sure how to fix this one :-/

[AriPerkkio]

basically we don't have code to account for someone reassigning the same value to a variable

This can also reproduced with following:

import React, { Component } from "react";

const MyComponent = () => <div />;
let ref = "";

class MyClassComponent extends Component {
  updateRef(valueForRef) {
    ref = valueForRef;
  }

  render() {
    // This part is required for the crash even though reassigned value is not used
    const valueForRef = ref;

    return <MyComponent valueForRef={ref} />;
  }
}

[AriPerkkio]

This week's scheduled scan caught a case with bit more sense. Just adding this here if it helps in future:

---

Rule: jsx-max-depth

• Message: Maximum call stack size exceeded Occurred while linting <text>:22
• Path: Devorein/Qocean/client/src/components/Modal/WarnModal.jsx
• Link

			<div className="custom_modal">
				<Modal className={classes.modal} open={isOpen} closeAfterTransition>
					<Fade in={isOpen}>
						<DialogContent>
							<Icon icon="cancel" onClick={onClose} popoverText="Close Modal" />
							<div className="modal_content">{children}</div>
							<div className={clxs('modal_buttons', classes.buttons)}>
								<Button className="modal_buttons--cancel" onClick={onCancel}>
									{cancelMsg ? cancelMsg : 'Cancel'}
								</Button>

RangeError: Maximum call stack size exceeded
Occurred while linting <text>:22
    at Reference.hasOwnProperty (<anonymous>)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:87:15)
    at findJSXElementOrFragment(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:101:49)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)
    at findJSXElementOrFragment(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:101:49)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)
    at findJSXElementOrFragment(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:101:49)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)
    at findJSXElementOrFragment(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:101:49)
    at find (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-max-depth.js:93:18)

[ljharb]

@AriPerkkio your case seems to already be fixed. I'll add it just in case.

[AriPerkkio]

Looks good. Let's close this issue and I'll open new one if this reappears in future scans. Weekly scheduled smoke test: eslint-plugin-react #29

[AriPerkkio]

Looks like this is still valid issue. As this can be reproduced with #2880 (comment) I'll just reopen this issue.

Added failing test case with minimal setup: AriPerkkio@c10a2ac
I'll take a look at the rule implementation next week.