No suitable component definition found for higher-order component

Open
#288 5 comments 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, react
Domain
documentation, tooling

Research direction

Start with the src/components/Test.jsx higher-order-component reproduction and run the shown react-docgen CLI command. Trace the parse path named in the error, then verify that the wrapped component is recognized and produces metadata like the direct-function example.

Written by the indexing model from the issue text.

Description

react-docgen can't find a component definition when the component is defined as a higher-order component:

import React from 'react';

const wrap = (CustomElement) => (props) =>
    <CustomElement { ...props } >{ props.children }</CustomElement>

const Test = wrap('custom-element');

export default Test;

> node_modules/.bin/react-docgen src/components/Test.jsx

Error with path "src/components/Test.jsx": Error: No suitable component definition found.
Error: No suitable component definition found.
    at parse (/private/tmp/test/bindings/react/node_modules/react-docgen/dist/parse.js:84:9)
    at Object.defaultParse [as parse] (/private/tmp/test/bindings/react/node_modules/react-docgen/dist/main.js:66:30)
    at parse (/private/tmp/test/bindings/react/node_modules/react-docgen/bin/react-docgen.js:103:17)
    at /private/tmp/test/bindings/react/node_modules/react-docgen/bin/react-docgen.js:204:30
    at FSReqWrap.oncomplete (fs.js:153:5)

If I apply the function myself, react-docgen works as expected:

const Test = (props) =>
    <custom-element { ...props } >{ props.children }</custom-element>

> node_modules/.bin/react-docgen src/components/Test.jsx

{"description":"","displayName":"Test","methods":[]}

Tested with react-docgen@2.21.0.

Dominant language
TypeScript
Stars
3.8k
Forks
316
Avg merge
3h 28m
Merged PRs (30d)
6

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reactjs/react-docgen

All issues in reactjs/react-docgen

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.