Doesn't work with react-scripts 5 (Webpack 5)

[kumikumi]

Description

Here's a sample repo with react-scripts 5. Storybook works with "@storybook/preset-create-react-app" but doesn't work after swapping it to "storybook-preset-craco"

Expected behavior

yarn storybook makes storybook build successfully.

Actual behavior

Get lots of errors like this:

ModuleNotFoundError: Module not found: Error: You attempted to import /home/path/to/storybook-react-scripts-webpack5/node_modules/@storybook/client-api which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Steps to Reproduce

Sample repo https://github.com/kumikumi/storybook-craco-react-scripts-webpack5

1. clone it and cd to it
2. yarn install
3. yarn storybook

Your environment

node.js version v17.8.0

[Clemios]

Got the same issue here, i also tried to add :

  addons: [
    {
      name: 'storybook-preset-craco',
      options: {
        cracoConfigFile: '../craco.config.js'
      }
    }
  ],

The craco.config.file is at the root of my project. And i got this error :

  info => Serving static files from ./public at /
ERR! Error: Cannot find module '../craco.config'

In addition, craco will move to CRA5 soon : https://github.com/gsoft-inc/craco/releases/tag/v7.0.0-alpha.0

[jdt3969]

My guess is that the root cause is that this package relies on directly requiring helpers from the dist folder of @storybook/preset-create-react-app though I haven't confirmed. Seems like one option is a PR to get those helpers exported though I can understand storybook not wanting to create / support that API.

A quick and dirty workaround that I implemented was to create a specific storybook craco config and just live without the ModuleScopePlugin for storybook because it's not important to me in that context though a more elegant solution might be to not remove entirely and directly include the desired paths like: https://github.com/dvhb/craco-extend-scope/blob/master/index.js

My Solution

.storybook/main.js Set path to storybook config

{
  name: 'storybook-preset-craco',
  options: {
    cracoConfigFile: path.join(__dirname, 'craco.storybook.config.js'),
  },
},

.storybook/craco.storybook.config.js Add craco plugin to remove ModuleScopePlugin

const cracoConfig = require('../craco.config');

/**
 * Add a plugin to remove ModuleScopePlugin from webpack when running storybook because it messes
 * with storybook-preset-craco. 
 */

cracoConfig.plugins.push({
  plugin: {
    overrideWebpackConfig: ({ webpackConfig }) => {
      webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
        (plugin) => plugin.constructor.name !== 'ModuleScopePlugin'
      );

      return webpackConfig;
    },
  },
});

module.exports = cracoConfig;

[kumikumi]

Thanks for the workaround @jdt3969 . I have now updated my sample repo to contain your suggested fix in the "workaround" branch. After applying your changes, storybook is now stuck at a "spinner" loading state.

[danielknell]

I need to find some time to work out why it doesn't work with the new storybook but it's not currently affecting me and my free time is limited so it's not high on my priority list atm, if someone wants to find a clean solution and PR I will merge but for now it will have to wait till I'm less busy.

[jdt3969]

@kumikumi Pulled your example repo and got the workaround branch to work by updating versions to what I'm using in my project. Change to these versions:

"@craco/craco": "7.0.0-alpha.3"
"storybook-preset-craco": "artisanofcode/storybook-preset-craco"

(Using the github link to this project because the most recent changes haven't been published to npm)

[itsjohncs]

[...] storybook is now stuck at a "spinner" loading state.

Summary: try npm install @storybook/preset-create-react-app@latest

Check you version of @storybook/preset-create-react-app (npm ls @storybook/preset-create-react-app). storybook-preset-craco allows any version above 3.1.5 but you need a more recent version to work with web pack 5. Since npm will respect your package-lock.json when it can, if you've ever installed an older version of @storybook/preset-create-react-app you can end up with an older version.

To fix this: install the latest version (npm install @storybook/preset-create-react-app@latest). You can even remove the @storybook/preset-create-react-app dependency from your package.json after you do this, since the important thing was updating package-lock.json.