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

@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

@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

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

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

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.

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)

@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.

@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!