Configure Storybook webpack to work with CRACO override

Question

I've been using storybook within the React application that I'm working in, and I'm facing some difficulty switching to the new preset. As seen below, storybook has given me a warning about the preset, when I run the following script.

npm run build-storybook

WARN Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install @storybook/preset-create-react-app and add it to the list of addons in your .storybook/main.js config file.
WARN The built-in preset has been disabled in Storybook 6.0.

The main issue is that the react application is utilizing Craco to override the default react configuration. However Craco is also preventing storybook from building via npm run build-storybook when @storybook/preset-create-react-app is added.

This is my storybook main.js file

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss",
    "storybook-addon-designs",
    "@storybook/preset-create-react-app",
  ],
  "framework": "@storybook/react",
}

and this is my craco config file

const cracoGraphqlLoader = require("craco-graphql-loader");
const {whenDev} = require('@craco/craco')

module.exports = {
  plugins: [{ plugin: cracoGraphqlLoader }],
  webpack:{
    configure: (webpackConfig) =>{
      webpackConfig.devtool = whenDev(()=>"eval-source-map")
      return webpackConfig
    }
  },

};

I've already looked at the npm package storybook-preset-craco, but I cannot add it due to the scale and security of the react application I'm working in.

Answer 1

For using Storybook with Creat React App (CRA) with Craco I install this specific preset:

https://www.npmjs.com/package/storybook-preset-craco

Reviewing the code of the addon, it is based on the official Storybook preset for CRA but with the necessary adjustments to make it work for Craco. I have used it in various applications.

Following the documentation, this is the way to be used:

1. First, install this preset to your project.

# npm
npm install -D storybook-preset-craco

or

# yarn
yarn add -D storybook-preset-craco

2. Once installed, add this preset to the appropriate file:

./.storybook/main.js

module.exports = {
  addons: ["storybook-preset-craco"],
};

Note: Don't forget to comment or remove the @storybook/preset-create-react-app from addons.

3. It also requires extra configuration if used in conjunction with the Docs Addon or you need to specify the path of the craco.config.js. You will find that information in the README.md of the addon.