`export default Component` and functional components declared with `function()` do not work
See original GitHub issueI’ve been looking at this for two days without any progress so I thought I’d bring the problem here. Does anything jump out is invalid to you guys?
Versions
react-docgen: 3.0.0-beta6 babel-plugin-react-docgen: 1.7.0
Babelrc
{
"presets": [
"react",
"es2015"
],
"plugins": [
"react-docgen",
"transform-decorators-legacy",
"transform-class-properties",
"transform-object-rest-spread",
"transform-function-bind",
"transform-runtime"
]
}
Source
import React from 'react';
import PropTypes from 'prop-types';
import { processProps } from '../utilities';
export default function Button(props) {
return <button {...processProps(props)} />;
}
Button.propTypes = {
/**
* Breakpoint where button changes to block
**/
block: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', true]),
/**
* Color class
**/
color: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
/**
* Size class
**/
size: PropTypes.oneOf(['baby', 'mama', 'papa']),
/**
* Add additional CTA specific styles -- Only applies to Button components
*/
isCTA: PropTypes.bool,
/**
* The button's content
*/
children: PropTypes.node
};
Problem
Not getting __docgenInfo
property on component constructor.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:10 (4 by maintainers)
Top Results From Across the Web
reactjs - Exporting functional component does not work
My Bus page which gives me the error. import React, { View, Text } from 'react'; import ...
Read more >How to Use Functional Components in React
Let's find out. I will start by declaring the variable inside the functional component. import React from 'react'; function Counter() { let n...
Read more >error function component is not a function declaration
It's telling you that it expects components to be declared as function declarations. That means this: export function FormTextField<FieldProps ...
Read more >Classes vs Functional components in React
Using default export of the arrow function is only possible after the declaration. You could just export default anonymous arrow function.
Read more >Types of React Components. Functional, Class, Pure, and…
Functional components do not need to be arrow functions. They can be declared with regular JavaScript functions. You can also pass in props...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@konsumer @danielduan i made a pr which allows you to use one of the builtin resolvers of react-docgen by passing options to the babel plugin.
I’m not sure how to write the tests for it however 😦
This all stems from my fondness of exporting everything (for unit-tests and storybooks) but making a default export that is the complete redux-connected component, as I use it my app. Most of my code looks like this, and I’d love to be able to get the doctext out:
This makes it so I can unit-test my state-mappings, the Component (without redux) and write storybook stories for just the component, but it’s also super-simple to use in my redux-enabled app.