react-styleguidist should work with create-react-app without config

[NoahFisher]

Current behavior

react-styleguidist does not work with latest create-react-app. The error I am receiving is below:

$ yarn styleguide
yarn run v1.13.0
$ styleguidist server
Warning: No webpack config found. You may need to specify "webpackConfig" option in your style guide config:
https://react-styleguidist.js.org/docs/webpack.html

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://10.1.10.119:6060/

./src/Components/Button/Button.js 6:6
Module parse failed: Unexpected token (6:6)
You may need an appropriate loader to handle this file type.
|   render() {
|    return(
>       <button> {this.props.children} </button>
|     )
|   }
 @ ./node_modules/react-styleguidist/lib/index.js (./node_modules/react-styleguidist/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/index.js) 46:30-118
 @ ./node_modules/react-styleguidist/lib/index.js
 @ multi ./node_modules/react-styleguidist/lib/index ./node_modules/react-dev-utils/webpackHotDevClient.js

Learn how to add webpack loaders to your style guide:
https://react-styleguidist.js.org/docs/webpack.html

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To reproduce

Create a new create-react-app repo:

yarn create create-react-app

Add react-styleguidist

yarn add react-styleguidist

Add component to src/Components and run yarn styleguidist (I added a dumb Button component to src/Components/Button/).

Example repo here:
https://github.com/NoahFisher/cra-styleguidist-failur

Expected behavior

Per the docs, using react-styleguidist with Create React App should just work.

[tinaboyce]

I have the same issue. I am currently using [email protected]

[gsantiago]

Same issue here with CRA 2.15

[lucifer1004]

@NoahFisher @tinaboyce @gsantiago

As a temporary workaround:

In styleguide.config.js

module.exports = {
  propsParser: require('react-docgen').parse,
  webpackConfig: require('react-scripts/config/webpack.config'),
}

For TypeScript projects,

module.exports = {
  propsParser: require('react-docgen-typescript').parse,
  webpackConfig: require('react-scripts/config/webpack.config'),
}

[stale[bot]]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.