Does not recognize a `CallExpression`.

[ryanpcmcquen]

| Compiling...Warning: Cannot parse source\containers\ProductCard\ProductCard.js: TypeError: Got unsupported definition type. Definition must be one of ObjectExpression, ClassDeclaration, ClassExpression,VariableDeclaration, ArrowFunctionExpression, FunctionExpression, TaggedTemplateExpression or FunctionDeclaration. Got "CallExpression"instead.

It usually means that react-docgen does not understand your source code, try to file an issue here:
https://github.com/reactjs/react-docgen/issues

When using ReactRedux.connect( containers are returned as CallExpressions. Is there a workaround to make react-docgen recognize them?

[fkling]

Could you provide a complete code example and the output of running react-docgen? Which tool are you using here?

[ryanpcmcquen]

@fkling, you can do a npm install && npm run styleguide here to see the errors:
https://github.com/ryanpcmcquen/ui-sources-builder-prototype

[okonet]

Same here when trying to document components written with https://github.com/jxnblk/styled-system/tree/master/system-components

import system from 'system-components'

// creates a Box with default props tied to your theme
const Box = system({
  p: 2,
  bg: 'blue'
})

[selrond]

Same issue here, using react-styleguidist with styled-system & system-components

import system from 'system-components'
import { themeGet } from 'styled-system'

const Box = system(
	{
		blacklist: ['round'],
	},
	'space',
	'width',
	'fontSize',
	'textColor',
	'bgColor',
	'color',
	// typography
	'fontFamily',
	'textAlign',
	'lineHeight',
	'fontWeight',
	'letterSpacing',
	// layout
	'display',
	'maxWidth',
	'minWidth',
	'height',
	'maxHeight',
	'minHeight',
	'size',
	'ratio',
	'border',
	'borderTop',
	'borderRight',
	'borderBottom',
	'borderLeft',
	'borders',
	'borderColor',
	// position
	'position',
	'zIndex',
	'top',
	'right',
	'bottom',
	'left',
	props => ({
		borderRadius: props.round ? `${themeGet('radii.1')(props)}px` : 0,
		boxShadow: props.shadow ? themeGet('shadows.1')(props) : 'none',
	}),
)

/** @component */
export default Box

Getting

Warning: Cannot parse src/components/atoms/Grid/Box.js: TypeError: Got unsupported definition type. Definition must be one of ObjectExpression, ClassDeclaration, ClassExpression,VariableDeclaration, ArrowFunctionExpression, FunctionExpression, TaggedTemplateExpression or FunctionDeclaration. Got "CallExpression"instead.

It usually means that react-docgen does not understand your source code, try to file an issue here:
https://github.com/reactjs/react-docgen/issues

[flybayer]

Has anyone found a solution to this (using system-components with react-styleguidist)?

[sapegin]

Looks like with system-components 3.x the error is a bit different:

TypeError: Got unsupported definition type. Definition must be one of ObjectExpression, ClassDeclaration, ClassExpression,VariableDeclaration, ArrowFunctionExpression, FunctionExpression, TaggedTemplateExpression or FunctionDeclaration. Got "Literal"instead.

Literal instead of CallExpression.

[sapegin]

Nope, it's not because of system-components 3.x, it's because Jmeyering/react-docgen-annotation-resolver#3

[jamesmfriedman]

I need the exact same thing, but for me it's my own personally defined factory functions.

/**
 * The Elevation Component
 */
export const Elevation: React.ComponentType<ElevationPropsT> = simpleTag({
  displayName: 'Elevation',
  defaultProps: {
    z: 0
  },
  tag: 'div',
  classNames: (props: ElevationPropsT) => [
    `mdc-elevation--z${props.z}`,
    { 'mdc-elevation-transition': props.transition }
  ],
  consumeProps: ['z', 'transition']
});

export default Elevation;

Basically I need this to resolve my cast expression React.ComponentType<ElevationPropsT> with Flow.