react-styleguidist: Error with Stateless Components

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;
    }
};

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 16 (2 by maintainers)

Most upvoted comments

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.

jeffkamo on Jan 27, 2018

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.

SimonSomlai on Mar 7, 2019

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!

lensbart on Oct 5, 2017