Error with Stateless Components

[ascension]

Has anyone else had an issue with getting stateless functional components to load?

I am getting this error:

Error when parsing src/scripts/components/Inputs/Button.jsx RangeError: Maximum call stack size exceeded

This my styleguide.config,js

/* global module, require, process, __dirname */

const path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const docgen = require('react-docgen');

module.exports = {
    title: 'Components',
    defaultExample: true,
    serverPort: 5000,
    showCode: true,
    skipComponentsWithoutExample: true,
    getExampleFilename: componentpath => componentpath.replace(/\.jsx$/, '.examples.md'),
    resolver: docgen.resolver.findAllComponentDefinitions,
    sections: [
        {
            name: 'Inputs',
            components: './src/scripts/components/Inputs/**/*.jsx',
        },
        {
          name: 'Navigation',
          components: './src/scripts/components/NavBar/**/*.jsx',
        },
        {
          name: 'Layout',
          components: './src/scripts/components/layout/**/*.jsx',
        },
      ],
    updateWebpackConfig: function(webpackConfig, env) {
        const dir = path.join(__dirname, 'src');

        webpackConfig.module.loaders.push(
          {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              include: path.join(__dirname, 'src'),
              loader: 'babel'
          },
          {
              test: /\.css$/,
              include: dir,
              loader: 'style!css?modules&importLoaders=1'
          },
          {
              test: /\.scss$/,
              include: path.join(__dirname, 'src'),
              loader: ExtractTextPlugin.extract(
                'style-loader',
                'css-loader?' +
                'modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' +
                '!sass')
          },
          {
              test: /\.less$/,
              exclude: /node_modules/,
              loader: 'style!css!less'
          },
          {
              test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
              include: path.join(__dirname, 'src'),
              loader: 'url?limit=8192'
          }
        );

        webpackConfig.plugins.push(
          new ExtractTextPlugin('css/app.css')
        );

        return webpackConfig;
    }
};

[sapegin]

Would you mind making an example as described here?

[sapegin]

Closing this for now. Feel free to reopen with more details.

[ashokpatidar]

i am also facing the same issue

[SaraVieira]

@ashokpatidar Can you provide examples ?

[lensbart]

@SaraVieira I'm having the same issue as well, after transforming my stateless class components to function components (as per ESLint guidelines). Had no issues before conversion. Even the most trivial cases now throw a RangeError: Maximum call stack size exceeded, e.g.

import React from 'react'
export default function Blockquote(props) {
  return (
    <blockquote>
      {props.children}
    </blockquote>
  )
}

My styleguide.config.js file:

const path = require('path')
const webpackConfig = require('./webpack.config.js')

module.exports = {
  assetsDir: 'public/',
  components: 'app/components/**/*.{js,jsx}',
  getExampleFilename: (componentPath) => (
    componentPath.replace(/\.jsx?$/, '.md')
  ),
  require: [
    'babel-polyfill',
    path.join(__dirname, 'public/style.css')
  ],
  sections: [
    // ...some sections
  ],
  title: 'Nextbook Documentation',
  webpackConfig
}

I have no idea what might cause this, but I doubt styleguide.config.js is the issue here (I commented out most entries and the issue kept persisting)

[lensbart]

Found it. Apparently this doesn't work:

import React from 'react'
export default function Blockquote(props) {
  return (
    <blockquote>
      {props.children}
    </blockquote>
  )
}

But this does:

import React from 'react'
module.exports = function Blockquote(props) {
  return (
    <blockquote>
      {props.children}
    </blockquote>
  )
}

Hope this helps!

[poeschko]

Having the same issue. Could this be reopened?

[lensbart]

@poeschko I fixed my issue by using yarn instead of npm. I think this solved an issue with different versions of react-docgen across several dependencies not working well together.

[poeschko]

@lensbart Thanks for the tipp! But I'm already using yarn... What version of react-docgen are you using? Here's the entry from my yarn.lock:

react-docgen@^3.0.0-beta8:
  version "3.0.0-beta8"
  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0-beta8.tgz#57888166cffd0681fa20fa0d73e569fa7fd04c3c"
  dependencies:
    async "^2.1.4"
    babel-runtime "^6.9.2"
    babylon v7.0.0-beta.20
    commander "^2.9.0"
    doctrine "^2.0.0"
    node-dir "^0.1.10"
    recast "^0.12.6"

[lensbart]

Here it looks pretty much the same! Have you trying uninstalling & reinstalling react-docgen?

react-docgen@^3.0.0-beta8:
  version "3.0.0-beta8"
  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0-beta8.tgz#57888166cffd0681fa20fa0d73e569fa7fd04c3c"
  dependencies:
    async "^2.1.4"
    babel-runtime "^6.9.2"
    babylon v7.0.0-beta.20
    commander "^2.9.0"
    doctrine "^2.0.0"
    node-dir "^0.1.10"
    recast "^0.12.6"

[pke]

Running into the same problem with this as the only component in the styleguidist config:

import React from "react"
import PropTypes from "prop-types"
import styled from "styled-components"

/** A phone number is a string */
export const PhoneNumberType = React.PropTypes.string

const PROPTYPES = {
  /** The number as a string. It will be normalised */
  number: PhoneNumberType.isRequired,
  /** The content to display instead of the `number` */
  children: PropTypes.node,
}

const PhoneNumberLink = styled.a`
  white-space: nowrap;
`

// https://trello.com/c/rduUgl0w/1120-normalize-telephone-numbers
export const normalizePhoneNumber = number => (
  number.toString().replace(/[.\- ()/]|(?:\(0\))/g, "")
)

export const phoneUrl = number => `tel:${normalizePhoneNumber(number)}`

/**
 * A link `<a>` to a phone URL (`tel:`)
 *
 * Activating this link will launch the mobile devices phone app or on the
 * desktop most likely Skype.
 *
 * You should always provide a valid international phone number (ie: +49-221-433433).
 * This way your users can call the number from anywhere on the world and not
 * only when they are local to the phone number.
 */
const PhoneNumber = ({ number, children = number }) => (
  <PhoneNumberLink href={phoneUrl(number)}>{children}</PhoneNumberLink>
)

PhoneNumber.propTypes = PROPTYPES
export default PhoneNumber

[jeffkamo]

Any movement on this?

This still appears to be an issue for me. Installing my node packages from scratch is not working for me. I've tried both npm and yarn, and the results are the same.

Interesting to note that...

// This works
const Button = ({children}) => (
    <div>{children}</div>
)

// This does not work
const Button = ({children}) => {
    return (
        <div>{children}</div>
    )
}

See it in action:

Actually I noticed there was a time when both the above examples didn't work, and re-installing all my packages did fix the implicit return example. But as of now, the explicit return still doesn't work as expected.

I am using the latest version of react-styleguidist:

├─ react-styleguidist@6.2.0
│  ├─ react-docgen-annotation-resolver@^1.0.0
│  ├─ react-docgen-displayname-handler@^1.0.1
│  ├─ react-docgen@^3.0.0-beta9
│  ├─ react-docgen@3.0.0-beta9
│  │  ├─ async@^2.1.4
│  │  ├─ babel-runtime@^6.9.2
│  │  ├─ babylon@7.0.0-beta.31
│  │  ├─ commander@^2.9.0
│  │  ├─ doctrine@^2.0.0
│  │  ├─ node-dir@^0.1.10
│  │  └─ recast@^0.12.6

[n1313]

@jeffkamo I cannot reproduce this issue locally: both ways work. I suspect the problem might be in your babel setup. Can you make a minimal example repo that demonstrates the problem?

[jeffkamo]

Well, in setting up a pared down example for you, @n1313, I discovered what was causing this issue in my project.

It turns out our project was also depending on react-docgen and was using it into our styleguidist.config.js

const DocGen = require('react-docgen') // <-- v2.15.0 from our local package.json

// ...

module.exports = {
    // ...
    resolver: DocGen.resolver.findAllComponentDefinitions, // <-- this was the problem
    // ...
}

Removing the resolver key from this module.export fixes the problem, and my components appear to work better.

Cheers, and thanks!

Edit!

Instead of just removing the resolver (because we need it), updating react-docgen to 3.0.0-beta9 (which is currently used by react-styleguidist) also fixed this issue.

[rameshsunkara]

updating react-docgen to 3.0.0-beta9 (which is currently used by react-styleguidist) also fixed this issue.

This fixed our problem. Thank you very much for posting it here. We basically removed react-docgen from dev dependecies and let styleguidist pull whatever version it needs.

[SimonSomlai]

Just removing react-docgen didn't work for me. But ;

downgrading styleguidist from v9 to ^8.0.6 AND removing react-docgen from package.json solved the problem for me.