Description
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
The jsx-newline rule is broken with this options on the given source code.
'react/jsx-newline': [
1,
{ prevent: true, allowMultilines: true }
],
const frag: DocumentFragment = (
<Fragment>
<sni-sequence-editor-tool
name="forward"
direction="forward"
type="control"
onClick={ () => this.onClickNavigate('forward') }
/>
<sni-sequence-editor-tool
name="rotate"
direction="left"
type="control"
onClick={ () => this.onClickNavigate('left') }
/>
<sni-sequence-editor-tool
name="rotate"
direction="right"
type="control"
onClick={ (): void => this.onClickNavigate('right') }
/>
<div className="sni-sequence-editor-control-panel__delete" data-name="delete" onClick={ this.onDeleteCommand } />
{
...Array.from(this.children)
}
</Fragment>
)
Oops! Something went wrong! :(
ESLint: 8.49.0
TypeError: Cannot read properties of undefined (reading 'loc')
Occurred while linting .../Foo.tsx:1
Rule: "react/jsx-newline"
at isMultilined (\node_modules\eslint-plugin-react\lib\rules\jsx-newline.js:23:15)
at \node_modules\eslint-plugin-react\lib\rules\jsx-newline.js:111:22
at Array.forEach ()
at \node_modules\eslint-plugin-react\lib\rules\jsx-newline.js:87:27
at Set.forEach ()
at Program:exit (\node_modules\eslint-plugin-react\lib\rules\jsx-newline.js:86:27)
at ruleErrorHandler (\node_modules\eslint\lib\linter\linter.js:1051:28)
at \node_modules\eslint\lib\linter\safe-emitter.js:45:58
at Array.forEach ()
at Object.emit (\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
I tried to take out parts from the code line by line and when the { ...Array.from(this.children) } part is missing then it works well.
(a few minutes later)
Ok, the rule is broken when you wanna use spread something in the JSX.
Expected Behavior
The rule autofixes the code to this:
const frag: DocumentFragment = (
<Fragment>
<sni-sequence-editor-tool
name="forward"
direction="forward"
type="control"
onClick={ () => this.onClickNavigate('forward') }
/>
<sni-sequence-editor-tool
name="rotate"
direction="left"
type="control"
onClick={ () => this.onClickNavigate('left') }
/>
<sni-sequence-editor-tool
name="rotate"
direction="right"
type="control"
onClick={ (): void => this.onClickNavigate('right') }
/>
<div className="sni-sequence-editor-control-panel__delete" data-name="delete" onClick={ this.onDeleteCommand } />
{
...Array.from(this.children)
}
</Fragment>
)
eslint-plugin-react version
v7.33.2
eslint version
v8.49.0
node version
v20.3.1