no-typos: TypeError: only function nodes are expected

[AriPerkkio]

Hello, no-typos rule seems to crash in certain cases. This issue was spotted by automated CI run - it is not blocking my development or anything.

I don't think these bugs are included in any releases yet.

#2963 (comment)

eslint-plugin-react@master

Minimal repro:

Failing test cases:

  {
    code: `
    const MyComponent = React.forwardRef((props, ref) => <div />);
    MyComponent.defaultProps = { value: "" };
    `,
    parserOptions
  },
  {
    code: `
    import styled from "styled-components";

    const MyComponent = styled.div;
    MyComponent.defaultProps = { value: "" };
    `,
    parserOptions
  }

TypeError: only function nodes are expected
Occurred while linting <input>:3
      at Object.traverseReturns (lib/util/ast.js:87:11)
      at Object.isReturningJSX (lib/util/jsx.js:97:11)
      at Object.isReturningJSX (lib/util/Components.js:413:22)
      at Object.MemberExpression (lib/rules/no-typos.js:245:74)
      at updatedRuleInstructions.<computed> (lib/util/Components.js:935:45)
      at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
      at Array.forEach (<anonymous>)
      at Object.emit (node_modules/eslint/lib/linter/safe-emitter.js:45:38)
      at NodeEventGenerator.applySelector (node_modules/eslint/lib/linter/node-event-generator.js:293:26)
      at NodeEventGenerator.applySelectors (node_modules/eslint/lib/linter/node-event-generator.js:322:22)
      at NodeEventGenerator.enterNode (node_modules/eslint/lib/linter/node-event-generator.js:336:14)
      at CodePathAnalyzer.enterNode (node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23)
      at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/linter.js:960:32
      at Array.forEach (<anonymous>)
      at runRules (node_modules/eslint/lib/linter/linter.js:955:15)

Crash reports from real projects

Rule: no-typos

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/mozilla/Spoke/src/ui/inputs/StringInput.js:17
• Path: mozilla/Spoke/src/ui/inputs/StringInput.js
• Link

  15 | StringInput.displayName = "StringInput";
  16 |
> 17 | StringInput.defaultProps = {
  18 |   value: "",
  19 |   onChange: () => {},
  20 |   type: "text",

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/mozilla/Spoke/src/ui/inputs/StringInput.js:17
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at Object.MemberExpression (/workspaces/eslint-plugin-react/lib/rules/no-typos.js:245:74)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/node-event-generator.js:293:26)
    at NodeEventGenerator.applySelectors (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/node-event-generator.js:322:22)

Rule: no-typos

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/mozilla/Spoke/src/ui/layout/MediaGrid.js:38
• Path: mozilla/Spoke/src/ui/layout/MediaGrid.js
• Link

  36 | `;
  37 |
> 38 | MediaGridItemContainer.propTypes = {
  39 |   aspectRatio: PropTypes.number.isRequired,
  40 |   borderRadius: PropTypes.number.isRequired,
  41 |   selected: PropTypes.bool

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/mozilla/Spoke/src/ui/layout/MediaGrid.js:38
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at Object.MemberExpression (/workspaces/eslint-plugin-react/lib/rules/no-typos.js:245:74)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/node-event-generator.js:293:26)
    at NodeEventGenerator.applySelectors (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/node-event-generator.js:322:22)

[ljharb]

It seems possible to catch forwardRef and warn properly on them, but not on styled-components since there's no way to statically know it's a component.

[ljharb]

For now, I'll fix the crash but not actually handle them.

[AriPerkkio]

Got the error logs of no-unstable-nested-components crashes out now and it looks like those were caused by same root cause. Here are the logs just in case.

Rule: no-unstable-nested-components

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/uber/baseweb/documentation-site/examples/list/menu-adapter.js:36
• Path: uber/baseweb/documentation-site/examples/list/menu-adapter.js
• Link

  34 |             overrides: {
  35 |               ListItem: {
> 36 |                 component: React.forwardRef((props, ref) => (
  37 |                   <MenuAdapter
  38 |                     {...props}
  39 |                     ref={ref}

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/uber/baseweb/documentation-site/examples/list/menu-adapter.js:36
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at isStatelessComponentReturningNull (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:385:34)
    at validate (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:424:12)
    at Object.ArrowFunctionExpression (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:463:39)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

Rule: no-unstable-nested-components

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/uber/baseweb/documentation-site/examples/list/menu-adapter.tsx:33
• Path: uber/baseweb/documentation-site/examples/list/menu-adapter.tsx
• Link

  31 |             overrides: {
  32 |               ListItem: {
> 33 |                 component: React.forwardRef((props: any, ref) => (
  34 |                   <MenuAdapter
  35 |                     {...props}
  36 |                     ref={ref}

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/uber/baseweb/documentation-site/examples/list/menu-adapter.tsx:33
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at isStatelessComponentReturningNull (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:385:34)
    at validate (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:424:12)
    at Object.ArrowFunctionExpression (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:463:39)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

Rule: no-unstable-nested-components

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/uber/baseweb/src/datepicker/__tests__/datepicker-range.scenario.js:26
• Path: uber/baseweb/src/datepicker/__tests__/datepicker-range.scenario.js
• Link

  24 |         Day: {
  25 |           // eslint-disable-next-line react/display-name
> 26 |           component: React.forwardRef((props, ref) => (
  27 |             <StyledDay
  28 |               data-highlighted={props.$isHighlighted}
  29 |               {...props}

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/uber/baseweb/src/datepicker/__tests__/datepicker-range.scenario.js:26
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at isStatelessComponentReturningNull (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:385:34)
    at validate (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:424:12)
    at Object.ArrowFunctionExpression (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:463:39)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

Rule: no-unstable-nested-components

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/uber/baseweb/src/list/__tests__/list-item-menu-adapter.scenario.js:38
• Path: uber/baseweb/src/list/__tests__/list-item-menu-adapter.scenario.js
• Link

  36 |             overrides: {
  37 |               ListItem: {
> 38 |                 component: React.forwardRef((props, ref) => (
  39 |                   <MenuAdapter
  40 |                     {...props}
  41 |                     ref={ref}

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/uber/baseweb/src/list/__tests__/list-item-menu-adapter.scenario.js:38
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at isStatelessComponentReturningNull (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:385:34)
    at validate (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:424:12)
    at Object.ArrowFunctionExpression (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:463:39)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

Rule: no-unstable-nested-components

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/xcritical-software/xc-front-kit/packages/button/stories/Button.stories.tsx:213
• Path: xcritical-software/xc-front-kit/packages/button/stories/Button.stories.tsx
• Link

  211 |                   HTMLAnchorElement,
  212 |                   Link & AllHTMLAttributes<HTMLAnchorElement>
> 213 |                 >(({ href = '', children, ...rest }, ref) => (
  214 |                   <Link {...rest} to={href} innerRef={ref}>
  215 |                     {children}
  216 |                   </Link>

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/xcritical-software/xc-front-kit/packages/button/stories/Button.stories.tsx:213
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at isStatelessComponentReturningNull (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:385:34)
    at validate (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:424:12)
    at Object.ArrowFunctionExpression (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:463:39)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

Rule: no-unstable-nested-components

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/xcritical-software/xc-front-kit/packages/button/stories/ButtonGroup.stories.tsx:82
• Path: xcritical-software/xc-front-kit/packages/button/stories/ButtonGroup.stories.tsx
• Link

  80 |             appearance="pagination"
  81 |             component={forwardRef(
> 82 |               ({ children, className }, ref: RefObject<HTMLAnchorElement>) => (
  83 |                 <Link innerRef={ref} className={className} to="/3">
  84 |                   {children}
  85 |                 </Link>

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/xcritical-software/xc-front-kit/packages/button/stories/ButtonGroup.stories.tsx:82
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at isStatelessComponentReturningNull (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:385:34)
    at validate (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:424:12)
    at Object.ArrowFunctionExpression (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:463:39)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

Rule: no-unstable-nested-components

• Message: only function nodes are expected Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/atlassian/brisk-docs/packages/gatsby-generator/un-src/components/breadcrumbs.tsx:66
• Path: atlassian/brisk-docs/packages/gatsby-generator/un-src/components/breadcrumbs.tsx
• Link

  64 |               href={path}
  65 |               text={titleCase(pages[idx])}
> 66 |               component={React.forwardRef(() => (
  67 |                 <p style={{ fontWeight: 'bold' }}>{titleCase(pages[idx])}</p>
  68 |               ))}
  69 |             />

TypeError: only function nodes are expected
Occurred while linting /workspaces/eslint-plugin-react/node_modules/eslint-remote-tester/.cache-eslint-remote-tester/atlassian/brisk-docs/packages/gatsby-generator/un-src/components/breadcrumbs.tsx:66
    at Object.traverseReturns (/workspaces/eslint-plugin-react/lib/util/ast.js:87:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/jsx.js:97:11)
    at Object.isReturningJSX (/workspaces/eslint-plugin-react/lib/util/Components.js:413:22)
    at isStatelessComponentReturningNull (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:385:34)
    at validate (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:424:12)
    at Object.ArrowFunctionExpression (/workspaces/eslint-plugin-react/lib/rules/no-unstable-nested-components.js:463:39)
    at updatedRuleInstructions.<computed> (/workspaces/eslint-plugin-react/lib/util/Components.js:935:45)
    at /workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/workspaces/eslint-plugin-react/node_modules/eslint/lib/linter/safe-emitter.js:45:38)