storybook: Unable to build Stoybook

Describe the bug I am trying to build Storybook. It fails.

Steps to reproduce the behavior:

Go to your project root.
run yarn build-storybook -c .storybook -o docs
build fails.

Expected behavior Story book to build.

Screenshots From my terminal:

λ yarn build:styleguide
yarn run v1.22.4
$ build-storybook -c .storybook -o docs
info @storybook/react v5.3.19
info
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Loading custom manager config.
info => Compiling manager..
info => manager built (18 s)
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading config/preview file in ".storybook".
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
info => Using base config because react-scripts is not installed.
info => Compiling preview..
70% building 591/619 modules 28 active ...l/runtime/helpers/asyncToGenerator.jsERR! => Failed to build the preview
ERR! No module factory available for dependency type: CssDependency
70% building 597/619 modules 22 active ...l/runtime/helpers/asyncToGenerator.js/Users/igreulich/apps/celula/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/igreulich/apps/celula/node_modules/neo-async/async.js:16:11)
    at /Users/igreulich/apps/celula/node_modules/neo-async/async.js:2818:7
    at process._tickCallback (internal/process/next_tick.js:61:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Code snippets If applicable, add code samples to help explain your problem.

System:

λ npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 76.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.19 => 5.3.19
    @storybook/addon-actions: ^5.3.19 => 5.3.19
    @storybook/addon-centered: ^5.3.19 => 5.3.19
    @storybook/addon-docs: ^5.3.19 => 5.3.19
    @storybook/addon-knobs: ^5.3.19 => 5.3.19
    @storybook/addon-links: ^5.3.19 => 5.3.19
    @storybook/addon-storyshots: ^5.3.19 => 5.3.19
    @storybook/addon-viewport: ^5.3.19 => 5.3.19
    @storybook/addons: ^5.3.19 => 5.3.19
    @storybook/react: ^5.3.19 => 5.3.19

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 19 (5 by maintainers)

Most upvoted comments

@Emidomenge The thing that technically fixed my issue was adding my app’s plugins to the webpack config storybook uses to load my components.

That is done in [root]/.storybook/main.js.

Here is my working one, that wont work for you, but should point you in the right direction:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const ceConfig = require('../webpack.config.js');

const plugins = [];

module.exports = {
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-a11y/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-links',
    '@storybook/addon-viewport/register',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      },
    },
  ],
  stories: ['../src/**/**/*.stories.(jsx|mdx)'],
  webpackFinal: async (config, { configType }) => {
    console.log('env of Storybook process', configType);
    const rule = config.module.rules.find(r =>
      // it can be another rule with file loader
      // we should get only svg related
      r.test && r.test.toString().includes('svg') &&
      // file-loader might be resolved to js file path so "endsWith" is not reliable enough
      r.loader && r.loader.includes('file-loader')
    );
    rule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;

    if (configType.toLowerCase() === 'production') {
      plugins.push(
        new MiniCssExtractPlugin({
          filename: '[name].min.css',
        }),
      );
    }

    return {
      ...config,
      module: {
        ...config.module,
        rules: [
          ...config.module.rules,
          ...ceConfig.module.rules,
        ],
      },
      plugins: [                  // This is where the magic happens.
        ...config.plugins,
        ...plugins,
      ],
    };
  },
};

igreulich on Jun 8, 2020

@igreulich same error message?

Maybe you need to check the output with --debug-webpack to a file, and check the detailed output of your manager and preview webpack configs.

matheo on Jun 5, 2020

In my case the missing one was MiniCssExtract. I could not tell you why error was complaining about not loading svg files, as that is handled by a loader, which I had already made Storybook aware of.

I am not sure if Storybook or MiniCssExtract is the one obfuscating the error, but either way, I have it working now.

igreulich on Jun 1, 2020