Storybook with craco - call a different verson of react-scripts

Question

Storybook currently calls react-scripts. However, I've got some parts of the CRA config overriden with craco. It means my application is invoked with craco ..., rather than react-scripts ....

Is there a clean solution to have Storybook call craco instead?

Arrogance

Did you find a solution to your problem ? – Charpoy

Answer 1

The solution I came up with is this :

.storybook/main.js :

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-viewport/register',
    '@storybook/addon-knobs/register',
  ],
  webpackFinal(config, { configType }) {
    return {
      ...config,
      resolve: {
        alias: {
          ...config.resolve.alias,
          '~': path.resolve(__dirname, '../src/'),
        },
      },
    };
  },
};

I was only using the alias feature in my craco file, so here I override webpack config from storybook and only add the alias parameter. For your case, you'll need to add your own config.

Charpoy

Answer 2

The @FR073N solution is good, but since the lasts versions, this throw an error.

One line was missing to fully override correctly the webpack config.

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-viewport/register',
    '@storybook/addon-knobs/register',
  ],
  webpackFinal(config, { configType }) {
    return {
      ...config,
      resolve: {
        ...config.resolve, // <= HERE
        alias: {
          ...config.resolve.alias,
          '~': path.resolve(__dirname, '../src/'),
        },
      },
    };
  },
};

Nogging

Answer 3

I've successfully used storybook-preset-craco with @[email protected] and [email protected] and @craco/[email protected] in a new CRA TypeScript project.

Unaccustomed

This library is completely broken, it doesn't work. It can only work when .storybook is inside /src, but storybook only works when .storybook is in the root directory. – Grossularite