Storybook: Cannot find module '.../react-scripts/config /webpack.config'

[dotpegaso]

Describe the bug
Can't run StoryBook properly

To Reproduce
Steps to reproduce the behavior:

1. I already have a CRA project with "react": "^16.8.6"
2. Added SB to my current project using npx -p @storybook/cli sb init --type react_scripts --use-npm
3. When I run npm run storybook I receive this error:

~ [feat/storybook] $ npm run storybook

> [email protected] storybook /Users/username/cra
> start-storybook -p 9009 -s public

info @storybook/react v5.3.18
info 
info => Loading static files from: /Users/username/cra/public .
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
ERR! Error: Cannot find module '/Users/username/cra/node_modules/react-scripts/config/webpack.config'
ERR! Require stack:
...

System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Binaries:
Node: 13.2.0 - /usr/local/bin/node
Yarn: 1.19.2 - /usr/local/bin/yarn
npm: 6.13.1 - /usr/local/bin/npm
Browsers:
Chrome: 81.0.4044.129
Safari: 13.1
npmPackages:
@storybook/addon-actions: 5.3.18 => 5.3.18
@storybook/addon-links: 5.3.18 => 5.3.18
@storybook/addons: 5.3.18 => 5.3.18
@storybook/preset-create-react-app: 2.1.1 => 2.1.1
@storybook/react: 5.3.18 => 5.3.18

[shilman]

Can't reproduce. Do you have a public repro?

[dotpegaso]

Can't reproduce. Do you have a public repro?

Unfortunately I don't.

[mjsarfatti]

I have the exact same error, even though I'm running react-scripts-ts.

This is my main.js:

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        scriptsPackageName: 'react-scripts-ts',
      },
    },
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

The problem seems to be with node_modules/@storybook/preset-create-react-app/dist/index.js line 100-103:

    // Require the CRA config and set the appropriate mode.
    var craWebpackConfigPath = path_1.join(scriptsPath, 'config', 'webpack.config');
    // eslint-disable-next-line global-require, import/no-dynamic-require, @typescript-eslint/no-var-requires
    var craWebpackConfig = require(craWebpackConfigPath)(webpackConfig.mode);

It's as if it ends up looking for a file named webpack.config, as opposed to webpack.config.dev.js?

UPDATE

The preset looks for the file webpack.config.js (which in recent CRA holds both the _dev_ and _prod_ config), but react-scripts-ts provides two separate files: webpack.config.dev.js and webpack.config.prod.js. @dotpegaso can you see if it's also your case?

[dotpegaso]

UPDATE

The preset looks for the file webpack.config.js (which in recent CRA holds both the _dev_ and _prod_ config), but react-scripts-ts provides two separate files: webpack.config.dev.js and webpack.config.prod.js. @dotpegaso can you see if it's also your case?

@mjsarfatti Yup, it is!

There's some way to solve that besides change the extension name manually?

[mjsarfatti]

Alright so, here is how I solved it (the concept is doing a custom webpack config, but actually importing your existing webpack.config.dev.js):

.storybook/main.js

const webpack = require('webpack');

// your app's webpack.config.js
const custom = require('react-scripts-ts/config/webpack.config.dev.js'); // 👈 point this to wherever your own webpack.config.dev.js is

module.exports = {
  stories: ["../src/**/*.stories.(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-actions", "@storybook/addon-links"],
  webpackFinal: (config) => {
    // "Finally, if your custom webpack config uses a loader that does not
    // explicitly include specific file extensions via the test property,
    // it is necessary to exclude the .ejs file extension from that loader."
    // https://storybook.js.org/docs/configurations/custom-webpack-config/#examples
    const oneOf = custom.module.rules[1].oneOf;
    oneOf[oneOf.length - 1].exclude.push(/\.ejs$/); // 👈 you most probably need this

    return {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules
      },
      plugins: [
        ...config.plugins,
        // See https://stackoverflow.com/a/51194917/416714 and
        // https://webpack.js.org/migrate/3/#loaderoptionsplugin-context
        new webpack.LoaderOptionsPlugin({  // 👈 you may or may not need this, I do because of an old webpack version
          options: {
            context: process.cwd() // or the same value as `context`
          }
        })
      ]
    };
  },
};

You should also uninstall @storybook/preset-create-react-app and remove it from your main.js as you are referencing your webpack config directly.

[dotpegaso]

@mjsarfatti that works!

I just had to change
const oneOf = custom.module.rules[1].oneOf; to
const oneOf = custom.module.rules[3].oneOf;

may the gods of custom webpacks bless you, thanks bro!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[nharrisanalyst]

storybook now only supports valid globs
you need "../src/*/.stories.@(js|jsx|ts|tsx)" that at symbol is important.

I also had to change
const oneOf = custom.module.rules[1].oneOf; to
const oneOf = custom.module.rules[2].oneOf;

[jzaburunov]

In my case roots grew from wrong node version. Problem disappeared, once I used node version 10+ for create-react-app command on the step of app creation.