Cannot launch styleguidist server on a clean create-react-app application : "you may need an appropriate webpack loader to handle this file type"

[mru2]

How to reproduce

Bootstrap a new app w/ create-react-app

npm install -g create-react-app
create-react-app teststyleguidist
cd teststyleguidist

Follow the getting started guide to add styleguidist :

package.json

{
  "name": "teststyleguidist",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.10"
  },
  "scripts": {
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-styleguidist": "^5.5.1"
  }
}

src/components/Button/index.js

import React from "react";
import PropTypes from "prop-types";

/**
 * General component description in JSDoc format. Markdown is *supported*.
 */
export default class Button extends React.Component {
  static propTypes = {
    /** Description of prop "foo". */
    foo: PropTypes.number,
    /** Description of prop "baz". */
    baz: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  };
  static defaultProps = {
    foo: 42
  };

  render() {
    return <button>Hello</button>;
  }
}

src/components/Button/Readme.md

React component example:

    <Button size="large">Push Me</Button>

Expected Behavior

Running yarn run styleguide launches the styleguidist dev server

Actual Behavior

❯❯❯ yarn run styleguide                                                                                                                                       
yarn run v0.19.1
$ styleguidist server
Style guide server started at:
http://0.0.0.0:6060

Cannot load ./src/components/Button/index.js: you may need an appropriate webpack loader to handle this file type.

Learn how to configure 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.

Source w/ reproducible issue :

https://github.com/mru2/teststyleguidist

[sapegin]

That’s weird: when I do all the steps you describe manually — it works fine, but not when I clone your repo ;-|

[sapegin]

When I run yarn run styleguide -- --verbose I see than webpack configs are different. The only difference I see so far is that react-scripts in dependencies in your repo and in devDependencies in mine.

[sapegin]

It actually was the reason, but I have no idea why.

[mru2]

Thank you !

Seems like this is a new feature, since 1.0.8, create-react-app migrated react-scripts out of the devDependencies: facebook/create-react-app#2657 😄

[sapegin]

Then it looks like a bug ;-(

[sapegin]

I was using the old version, that’s why it was in devDependencies. But I have no idea why it doesn’t work with dependencies — it shouldn’t be any different ;-|

[sapegin]

Should be fixed in 5.5.2.