React-styleguidist: Webpack config not found with create-react-app react-scripts 2.1.3

[byrne-greg]

Current behavior

When a user starts web app development using create-react-app, installs react-styleguidist, and attempts to create a styleguide build, they are informed that:

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

To reproduce

Steps

create-react-app react-app
cd react-app
npm i -D react-styleguidist
npx styleguidist build

package.json

{
  "name": "issue1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "react-styleguidist": "^8.0.6"
  }
}

This does not happen when react-scripts is set to version 2.1.1

Expected behavior

Webpack config to be loaded from react-scripts.
e.g.

Loading webpack config from:
../react-app/node_modules/react-scripts/config/webpack.config.dev.js

[tung-eh]

I've met exactly the same problem with react-scripts v2.1.2, so I need to fix by adding webpackConfig to styleguide.config.js:

module.exports = {
  webpackConfig: require('./node_modules/react-scripts/config/webpack.config.js'),
};

Hope it will be fix soon.

[ibrambe]

@tung-eh, your fix works, unless when using TypeScript.

When running yarn styleguide:build I get errors in *.jsx files like Module parse failed: The keyword 'interface' is reserved. Downgrading to react-scripts 2.1.1 fixes the build.

[melMass]

Thanks @tung-eh it can be shortened to the cleaner:

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

[joeycozza]

The PR for a fix exists. https://github.com/styleguidist/react-styleguidist/pull/1241

[IbrahimShamma99]

I had this issue and solved it by downgrading into react 16

[sasfwq123]

I got the same error. Nothing helps