question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`export default Component` and functional components declared with `function()` do not work

See original GitHub issue

I’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. screen shot 2017-08-13 at 10 51 58 am

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
flipacecommented, Sep 22, 2017

@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 😦

1reaction
konsumercommented, Sep 3, 2017

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:

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

/** A dumb component that says "hello" */
export const Demo = ({name}) => (<div>Hello {name}</div>)

Demo.propTypes = {
  /** the name of the person to say "hello" to */
  name: PropTypes.string
}

Demo.defaultProps = {
  name: 'World'
}

export const mapStateToProps = state => ({
  name: state.name
})

export default connect(mapStateToProps)(Demo)

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found