jsx-wrap-multilines: RangeError: Invalid count value

[AriPerkkio]

Hello, jsx-wrap-multilines 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/417578540

Complete list of dependencies and .eslintrc is available at CI runs logs, steps Run yarn list | grep eslint and Run yarn log --config ./plugin-configs/eslint-config-airbnb.config.js.

eslint-config-airbnb@18.2.1
eslint-plugin-react@7.21.5

extends: ['airbnb', 'airbnb/hooks', 'airbnb/whitespace']

Minimal repro:

import React from 'react';

const A =
<div>
    B
</div>;

Crash reports from real-world examples

Rule: jsx-wrap-multilines

• Message: Invalid count value Occurred while linting <text>:35
• Path: sencha/ext-react/packages/ext-react-material-ui-documentation/src/TabPanel.js
• Link

          id={`simple-tabpanel-${index}`}
          aria-labelledby={`simple-tab-${index}`}
        >

        {value === index &&

<TableContainer component={Paper}>
<Table className="" aria-label="simple table">
  <TableBody>
    {data.map((row, index) => (

RangeError: Invalid count value
Occurred while linting <text>:35
    at String.repeat (<anonymous>)
    at Object.fix (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:167:136)
    at normalizeFixes (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/report-translator.js:178:28)
    at /home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/report-translator.js:347:49
    at Object.report (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/linter.js:920:41)
    at report (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:130:15)
    at check (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:162:13)
    at LogicalExpression(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:252:11)
    at /home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)

Rule: jsx-wrap-multilines

• Message: Invalid count value Occurred while linting <text>:55
• Path: sencha/ext-react/packages/ext-react-material-ui-documentation/src/zz/zzold/CenterPanelExamples.js
• Link

          id={`center-tabpanel-${index}`}
          aria-labelledby={`center-tab-${index}`}
        >

        {centervalue === index &&


<React.Fragment>
{/* <div style={{height: '50px',border: '1px solid green'}}>
  <Typography variant="h3">

RangeError: Invalid count value
Occurred while linting <text>:55
    at String.repeat (<anonymous>)
    at Object.fix (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:167:136)
    at normalizeFixes (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/report-translator.js:178:28)
    at /home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/report-translator.js:347:49
    at Object.report (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/linter.js:920:41)
    at report (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:130:15)
    at check (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:162:13)
    at LogicalExpression(/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:252:11)
    at /home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)

Rule: jsx-wrap-multilines

• Message: Invalid count value Occurred while linting <text>:73
• Path: zooniverse/front-end-monorepo/packages/lib-react-components/src/Markdownz/helpers/testExamples.js
• Link

`

// Note the video and audio are first put into img tags. This is the expect jsx
output before our customization runs.
// They're then switched to audio or video depending on the mimetype of the
source.
export const jsx =
<>
  <Paragraph>
    😄
  </Paragraph>
  <Paragraph>

RangeError: Invalid count value
Occurred while linting <text>:73
    at String.repeat (<anonymous>)
    at Object.fix (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:167:136)
    at normalizeFixes (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/report-translator.js:178:28)
    at /home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/report-translator.js:347:49
    at Object.report (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/linter.js:920:41)
    at report (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:130:15)
    at check (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:162:13)
    at VariableDeclarator (/home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint-plugin-react/lib/rules/jsx-wrap-multilines.js:209:9)
    at /home/runner/work/eslint-remote-tester/eslint-remote-tester/ci/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)

[ljharb]

I can't reproduce this, even on the v7.21.5 tag - any idea what exact eslint config is being used for this rule, including which parser?

[AriPerkkio]

Looks like the airbnb config sets some options to this rule. Option "declaration": "parens-new-line" is causing the crash even with default Espree parser.

https://github.com/airbnb/javascript/blob/63098cbb6c05376dbefc9a91351f5727540c1ce1/packages/eslint-config-airbnb/rules/react.js#L293-L301

{
  "root": true,
  "env": {
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "16.13.1"
    },
  },
  "plugins": ["react"],
  "rules": {
    "react/jsx-wrap-multilines": [
      "error",
      {
        "declaration": "parens-new-line"
      }
    ]
  }
}