No suitable component definition found for higher-order component

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.

[trevordmiller]

It would be helpful for “react-docgen to pickup the component returned by wrap” IMO

[emccorson]

I managed to find a workaround that works for my components at least by hacking at the findExportedComponentDefinition resolver so it just returns whatever is exported without trying to resolve it to a component.

It works with my component in the form:

const AlertDialogButton = onsCustomElement('ons-alert-dialog-button');
AlertDialogButton.propTypes = { /* ... */ };
export default AlertDialogButton;

To use it, apply the patch to https://github.com/reactjs/react-docgen/blob/v5.4.0/src/resolver/findExportedComponentDefinition.js

diff --git a/src/resolver/findExportedComponentDefinition.js b/src/resolver/findExportedComponentDefinition.js
index 0ad8b00..7d88aba 100644
--- a/src/resolver/findExportedComponentDefinition.js
+++ b/src/resolver/findExportedComponentDefinition.js
@@ -76,14 +76,7 @@ export default function findExportedComponentDefinition(
   function exportDeclaration(path) {
     const definitions = resolveExportDeclaration(path).reduce(
       (acc, definition) => {
-        if (isComponentDefinition(definition)) {
-          acc.push(definition);
-        } else {
-          const resolved = resolveToValue(resolveHOC(definition));
-          if (isComponentDefinition(resolved)) {
-            acc.push(resolved);
-          }
-        }
+        acc.push(definition);
         return acc;
       },
       [],
@@ -96,7 +89,7 @@ export default function findExportedComponentDefinition(
       // If a file exports multiple components, ... complain!
       throw new Error(ERROR_MULTIPLE_DEFINITIONS);
     }
-    foundDefinition = resolveDefinition(definitions[0]);
+    foundDefinition = definitions[0];
     return false;
   }