Storybook: build-storybook fails with "No module factory available for dependency type: CssDependency"

Created on 6 Feb 2020 · 27Comments · Source: storybookjs/storybook

Describe the bug
Using 5.3.9 through the latest version of storybook, build-storybook fails with the following error:

ERR! => Failed to build the preview
ERR! No module factory available for dependency type: CssDependency
~/Projects/bah-uswds/bah-react-uswds/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');

I've tried nuking my node_modules folder and package-lock.json but I still get the same error.

Expected behavior

The storybook should build successfully.

System:

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz

Binaries:
Node: 13.7.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.6 - /usr/local/bin/npm

Browsers:
Chrome: 79.0.3945.130
Safari: 13.0.5

npmPackages:
@storybook/addon-a11y: 5.3.12 => 5.3.12
@storybook/addon-actions: 5.3.12 => 5.3.12
@storybook/addon-backgrounds: 5.3.12 => 5.3.12
@storybook/addon-docs: 5.3.12 => 5.3.12
@storybook/addon-knobs: 5.3.12 => 5.3.12
@storybook/addon-links: 5.3.12 => 5.3.12
@storybook/addon-storyshots: 5.3.12 => 5.3.12
@storybook/addon-storysource: 5.3.12 => 5.3.12
@storybook/addon-viewport: 5.3.12 => 5.3.12
@storybook/addons: 5.3.12 => 5.3.12
@storybook/cli: 5.3.12 => 5.3.12
@storybook/react: 5.3.12 => 5.3.12
@storybook/source-loader: 5.3.12 => 5.3.12

Additional context

This was previously working fine when we were on 5.3.9 but now it doesn't even work on 5.3.9. This leads me to believe it's an issue with a newer version of one of storybook's dependencies.

bug cli cra has workaround inactive

Source

ConnorDY

👍21

Most helpful comment

@shilman I found a fix for it.

storybook's webpack config has it's own setup with rules and plugins and therefore surely has something missing if you merge your own webpack config with it.

In my case, i've merged my rules, but forgot the plugins.
It's fixed after adding the missing plugins:

// main.js file

const custom = require('../webpack.config.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    stories: ['../src/**/*.story.tsx'],
    addons: [
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-knobs',
    ],
    webpackFinal: async config => {
        // do mutation to the config

        return {
            ...config,
            module: {
                ...config.module,
                rules: custom.module.rules
            },
            resolve: {
                ...custom.resolve,
                ...config.resolve,
                modules: [
                    ...config.resolve.modules,
                    ...custom.resolve.modules,
                ]
            },
            plugins: [
                new MiniCssExtractPlugin({
                    filename: "[name].[contenthash].css",
                }),
                ...config.plugins
            ]
        };
  },
};

No build issues, and storybook works as expected with:

mini-css-extract-plugin: ^0.9.0
@storybook/react: ^5.3.12

vertic4l on 10 Feb 2020

👍6 🎉3 ❤1

All 27 comments

@ConnorDY ugh, sorry to hear it. my guess is it's this one:

https://github.com/storybookjs/storybook/pull/9652

Can you try downgrading to 5.3.9 and then pinning your mini-css-extract-plugin to 0.7.0 or 0.8.0 in your package.json and tell me if that fixes it?

shilman on 7 Feb 2020

The issue is occurring on 5.3.9 as well even though it previously worked fine. We haven't changed anything which is why I think some unpinned dependency of storybook is causing the issue.

ConnorDY on 7 Feb 2020

@ConnorDY so my suggestion didn’t work? We upgraded mini-css-extract-plugin to fix a SASS bug, but it might be causing this problem in your setup (is my hypothesis)

shilman on 8 Feb 2020

We already had mini-css-extract-plugin pinned at version 0.7.0. This was to fix the bug you mentioned previously, but now the old fix and newer versions of storybook without the fix are both giving the same error described above.

ConnorDY on 8 Feb 2020

I see. Thanks for clarifying! Do you have a repro?

shilman on 8 Feb 2020

The issue is occurring on 5.3.9 as well even though it previously worked fine. We haven't changed anything which is why I think some unpinned dependency of storybook is causing the issue.

Encountered the same here

vertic4l on 10 Feb 2020

@shilman I found a fix for it.

storybook's webpack config has it's own setup with rules and plugins and therefore surely has something missing if you merge your own webpack config with it.

In my case, i've merged my rules, but forgot the plugins.
It's fixed after adding the missing plugins:

// main.js file

const custom = require('../webpack.config.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    stories: ['../src/**/*.story.tsx'],
    addons: [
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-knobs',
    ],
    webpackFinal: async config => {
        // do mutation to the config

        return {
            ...config,
            module: {
                ...config.module,
                rules: custom.module.rules
            },
            resolve: {
                ...custom.resolve,
                ...config.resolve,
                modules: [
                    ...config.resolve.modules,
                    ...custom.resolve.modules,
                ]
            },
            plugins: [
                new MiniCssExtractPlugin({
                    filename: "[name].[contenthash].css",
                }),
                ...config.plugins
            ]
        };
  },
};

No build issues, and storybook works as expected with:

mini-css-extract-plugin: ^0.9.0
@storybook/react: ^5.3.12

vertic4l on 10 Feb 2020

👍6 🎉3 ❤1

@vertic4l does this workaround properly belong in the default storybook config?

cc @ndelangen

shilman on 10 Feb 2020

@shilman if you got some rules which are using the MiniCssExtractPlugin, then yes of course.
Otherwise we need a big hint in the documentation for such stuff.

In the end it's pretty obvious.. the config shouldn't have rules where corresponding plugin is missing.

Best would be if something like Webpack could tell us, that there is a rule but no plugin for it.

vertic4l on 10 Feb 2020

The reason for this issue was that i am using css modules, and got rules for it... but the plugin was missing. My main.js just didn't merge everything necessary for it to work.

/**
    * CSS Modules
    */
{
    test: /\.module\.scss$/,
    use: [
        isProduction ? MiniCssExtractPlugin.loader : {
            loader: "style-loader",
            options: {
                sourceMap: true,
            }
        },
        {
            loader: "css-loader",
            options: {
                sourceMap: true,
                importLoaders: 2,
                modules: {
                    getLocalIdent,
                },
            }
        },
        {
            loader: "postcss-loader",
            options: {
                autoprefixer: {
                    browsers: ["last 2 versions"],
                },
                plugins: (() => [
                    autoprefixer,
                    cssnano({
                        preset: "default",
                    }),
                ]),
            },
        },
        {
            loader: "sass-loader",
            options: {
                sourceMap: true,
                sassOptions: {
                    includePaths: [
                        path.resolve(__dirname, "module"),
                        path.resolve(__dirname, "node_modules"),
                    ],
                },
            },
        },
    ],
},

vertic4l on 10 Feb 2020

The workaround @vertic4l mentioned is what we already had, although our fix looked a little different:

config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].module.css'}));

This was to fix the issue mentioned here: #9462.
But it no longer works and we receive the error mentioned in the original post above with and without it. We've tried storybook versions 5.3.9 through 5.3.12 and the error is identical on each.

ConnorDY on 11 Feb 2020

I started seeing this error after upgrading to react-scripts 3.3.1, downgrading to 3.3.0 has resolved it.

mini-css-extract-plugin 0.9.0
storybook 5.2.8

MrStevenHill on 11 Feb 2020

🚀1 🎉1 😄1 👍1

@MrStevenHill That did it! Pinning react-scripts to 3.3.0 resolved this for me.

I wonder what in the new release broke it:
https://github.com/facebook/create-react-app/releases/tag/v3.3.1

Maybe one of these:
https://github.com/facebook/create-react-app/pull/8106
https://github.com/facebook/create-react-app/pull/8281

Awareness: @shilman

ConnorDY on 11 Feb 2020

cc @mrmckeb

shilman on 12 Feb 2020

Interesting, I can take a look into this and try to understand how we can fix this in the preset.

Has anyone got a repo that I can take a look at for reproduction?

mrmckeb on 13 Feb 2020

I'm having the same Issue:

ERR! Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ERR! TypeError: this[MODULE_TYPE] is not a function ERR! at childCompiler.runAsChild (/Users/omarassadi/repos/hx-components/node_modules/mini-css-extract-plugin/dist/loader.js:141:24) ERR! at compile (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11) ERR! at hooks.afterCompile.callAsync.err (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) ERR! at AsyncSeriesHook.lazyCompileHook (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at compilation.seal.err (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) ERR! at AsyncSeriesHook.lazyCompileHook (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at hooks.optimizeAssets.callAsync.err (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) ERR! at AsyncSeriesHook.lazyCompileHook (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at hooks.optimizeChunkAssets.callAsync.err (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32) ERR! at _promise0.then._result0 (eval at create (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1) ERR! at processTicksAndRejections (internal/process/next_tick.js:81:5) ERR! @ ./src/theme/story/index.js 7:0-23 ERR! @ ./.storybook/config.js ERR! @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ERR! ./node_modules/@storybook/addon-info/dist/components/PropTable/style.css ERR! Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ERR! TypeError: this[MODULE_TYPE] is not a function ERR! at childCompiler.runAsChild (/Users/omarassadi/repos/hx-components/node_modules/mini-css-extract-plugin/dist/loader.js:141:24) ERR! at compile (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11) ERR! at hooks.afterCompile.callAsync.err (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) ERR! at AsyncSeriesHook.lazyCompileHook (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at compilation.seal.err (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) ERR! at AsyncSeriesHook.lazyCompileHook (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at hooks.optimizeAssets.callAsync.err (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) ERR! at AsyncSeriesHook.lazyCompileHook (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at hooks.optimizeChunkAssets.callAsync.err (/Users/omarassadi/repos/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32) ERR! at _promise0.then._result0 (eval at create (/Users/omarassadi/repos/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1) ERR! at processTicksAndRejections (internal/process/next_tick.js:81:5)

ohelixa on 17 Feb 2020

👍2

We are also seeing this issue. Downgrading react-scripts to 3.3.0 resolved it, but then that caused a different issue for us and we had to upgrade react-scripts to 3.4.0 which brought the problem back. The problem should be easily reproducible with the repo at https://github.com/mozilla/addons-code-manager/. Clone it and run yarn storybook-build and the problem should reproduce.

bobsilverberg on 18 Feb 2020

👍2

cc @mrmckeb 😭

shilman on 19 Feb 2020

Any news on this?

It runs locally but on build

We have:
react-scripts : 2.1.8
@storybook/addons: "5.3.12",
@storybook/channel-postmessage: "5.3.12",
@storybook/client-api: "5.3.12",
@storybook/client-logger: "5.3.12",
@storybook/core-events: "5.3.12",
@storybook/csf: "0.0.1",
@storybook/node-logger: "5.3.12",
@storybook/router: "5.3.12",
@storybook/theming: "5.3.12",
@storybook/ui: "5.3.12",

We get:

ERR! => Failed to build the preview ERR! ./node_modules/typeface-muli/index.css ERR! Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ERR! TypeError: this[MODULE_TYPE] is not a function ERR! at childCompiler.runAsChild (/home/circleci/hx-components/node_modules/mini-css-extract-plugin/dist/loader.js:141:24) ERR! at compile (/home/circleci/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11) ERR! at hooks.afterCompile.callAsync.err (/home/circleci/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/circleci/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) ERR! at AsyncSeriesHook.lazyCompileHook (/home/circleci/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at compilation.seal.err (/home/circleci/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/circleci/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) ERR! at AsyncSeriesHook.lazyCompileHook (/home/circleci/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at hooks.optimizeAssets.callAsync.err (/home/circleci/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35) ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/circleci/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) ERR! at AsyncSeriesHook.lazyCompileHook (/home/circleci/hx-components/node_modules/tapable/lib/Hook.js:154:20) ERR! at hooks.optimizeChunkAssets.callAsync.err (/home/circleci/hx-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32) ERR! at _promise0.then._result0 (eval at create (/home/circleci/hx-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1) ERR! at processTicksAndRejections (internal/process/next_tick.js:81:5) ERR! @ ./src/theme/story/index.js 7:0-23 ERR! @ ./.storybook/config.js

ohelixa on 26 Feb 2020

👍3 😕1

@bobsilverberg, sorry for the slow response. I was looking into this today and it looks like you're not using the preset for Create React App, but instead relying on the deprecated _built-in_ preset.

Have you tried using the new standalone preset?
https://www.npmjs.com/package/@storybook/preset-create-react-app

mrmckeb on 1 Mar 2020

🚀2 👍2 🎉1

@bobsilverberg, sorry for the slow response. I was looking into this today and it looks like you're not using the preset for Create React App, but instead relying on the deprecated _built-in_ preset.

Have you tried using the new standalone preset?
https://www.npmjs.com/package/@storybook/preset-create-react-app

worked for me, thanks!

aericson on 2 Mar 2020

👍1

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] on 23 Mar 2020

We are also seeing this issue. Downgrading react-scripts to 3.3.0 resolved it, but then that caused a different issue for us and we had to upgrade react-scripts to 3.4.0 which brought the problem back. The problem should be easily reproducible with the repo at https://github.com/mozilla/addons-code-manager/. Clone it and run yarn storybook-build and the problem should reproduce.

We are having the same problem in our team, and we installed the https://www.npmjs.com/package/@storybook/preset-create-react-app and it did not work. 😢

kevinccbsg on 24 Mar 2020

😕1 👍1

@kevinccbsg You need to check the given rules and the given plugins. That should be all.

In my case (see above) i'm using the rules from my own webpack config,
but forgot a plugin i was using and storybook's config doesn't have it (why should it?)

So the fix is, to add the plugins for the rules you are using, in my case adding the missing MiniCssExtractPlugin.

vertic4l on 24 Mar 2020

👍1

@kevinccbsg I've updated the config above to show everyone my latest version. It fixes a similiar issue when using '@storybook/addon-docs'. It's all about having the right mix of storybook's own webpack config and yours to get everything work as expected.

vertic4l on 24 Mar 2020

stale[bot] on 14 Apr 2020

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!

stale[bot] on 15 May 2020

Was this page helpful?

0 / 5 - 0 ratings