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

ConnorDY · 2020-02-06T14:10:07Z

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.

The text was updated successfully, but these errors were encountered:

shilman · 2020-02-07T01:11:19Z

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

#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?

ConnorDY · 2020-02-07T19:26:54Z

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.

shilman · 2020-02-08T00:11:02Z

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

ConnorDY · 2020-02-08T15:56:43Z

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.

shilman · 2020-02-08T17:14:27Z

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

vertic4l · 2020-02-10T08:12:58Z

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 · 2020-02-10T10:35:47Z

@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

shilman · 2020-02-10T10:37:53Z

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

cc @ndelangen

vertic4l · 2020-02-10T10:38:42Z

@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 · 2020-02-10T10:51:11Z

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"),
                    ],
                },
            },
        },
    ],
},

ConnorDY · 2020-02-11T12:34:23Z

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.

MrStevenHill · 2020-02-11T16:12:47Z

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

ConnorDY · 2020-02-11T16:44:38Z

@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:
facebook/create-react-app#8106
facebook/create-react-app#8281

Awareness: @shilman

shilman · 2020-02-12T01:33:58Z

cc @mrmckeb

mrmckeb · 2020-02-13T10:13:16Z

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?

ohelixa · 2020-02-17T07:55:05Z

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)

bobsilverberg · 2020-02-18T19:49:34Z

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.

shilman · 2020-02-19T17:32:23Z

cc @mrmckeb 😭

ohelixa · 2020-02-26T15:03:26Z

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

mrmckeb · 2020-03-01T15:35:28Z

@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

aericson · 2020-03-02T15:00:23Z

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

stale · 2020-03-23T15:56:07Z

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!

kevinccbsg · 2020-03-24T11:10:21Z

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

vertic4l · 2020-03-24T11:31:21Z

@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 · 2020-03-24T11:44:57Z

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

stale · 2020-04-14T12:45:09Z

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 · 2020-05-15T05:33:48Z

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!

shilman added bug cli labels Feb 7, 2020

shilman added this to 5.3 bugs in Hotlist Feb 7, 2020

shilman added the needs reproduction label Feb 10, 2020

shilman added the has workaround label Feb 10, 2020

shilman mentioned this issue Feb 11, 2020

StoryBook 5.3.12 fail add rules, work on 5.1.10 #9800

Closed

shilman added the cra Prioritize create-react-app compatibility label Feb 12, 2020

mirefly mentioned this issue Feb 18, 2020

Storybook build is failing on CI mozilla/addons-code-manager#1430

Closed

mirefly mentioned this issue Feb 19, 2020

Fix storybook build mozilla/addons-code-manager#1445

Merged

ndelangen removed the needs reproduction label Feb 27, 2020

stale bot added the inactive label Mar 23, 2020

stale bot removed the inactive label Mar 24, 2020

stale bot added the inactive label Apr 14, 2020

stale bot closed this as completed May 15, 2020

matheo mentioned this issue May 29, 2020

Unable to build Stoybook #10970

Closed

lili2311 mentioned this issue Nov 30, 2023

[Snyk-dev] Security upgrade puppeteer-core from 1.20.0 to 19.7.3 lili2311/storybook#227

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ConnorDY commented Feb 6, 2020 •

edited

shilman commented Feb 7, 2020 •

edited

ConnorDY commented Feb 7, 2020

shilman commented Feb 8, 2020 •

edited

ConnorDY commented Feb 8, 2020

shilman commented Feb 8, 2020

vertic4l commented Feb 10, 2020

vertic4l commented Feb 10, 2020 •

edited

shilman commented Feb 10, 2020 •

edited

vertic4l commented Feb 10, 2020 •

edited

vertic4l commented Feb 10, 2020 •

edited

ConnorDY commented Feb 11, 2020 •

edited

MrStevenHill commented Feb 11, 2020

ConnorDY commented Feb 11, 2020 •

edited

shilman commented Feb 12, 2020

mrmckeb commented Feb 13, 2020 •

edited

ohelixa commented Feb 17, 2020

bobsilverberg commented Feb 18, 2020

shilman commented Feb 19, 2020

ohelixa commented Feb 26, 2020 •

edited

mrmckeb commented Mar 1, 2020

aericson commented Mar 2, 2020

stale bot commented Mar 23, 2020

kevinccbsg commented Mar 24, 2020

vertic4l commented Mar 24, 2020 •

edited

vertic4l commented Mar 24, 2020 •

edited

stale bot commented Apr 14, 2020

stale bot commented May 15, 2020

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

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

Comments

ConnorDY commented Feb 6, 2020 • edited

shilman commented Feb 7, 2020 • edited

ConnorDY commented Feb 7, 2020

shilman commented Feb 8, 2020 • edited

ConnorDY commented Feb 8, 2020

shilman commented Feb 8, 2020

vertic4l commented Feb 10, 2020

vertic4l commented Feb 10, 2020 • edited

shilman commented Feb 10, 2020 • edited

vertic4l commented Feb 10, 2020 • edited

vertic4l commented Feb 10, 2020 • edited

ConnorDY commented Feb 11, 2020 • edited

MrStevenHill commented Feb 11, 2020

ConnorDY commented Feb 11, 2020 • edited

shilman commented Feb 12, 2020

mrmckeb commented Feb 13, 2020 • edited

ohelixa commented Feb 17, 2020

bobsilverberg commented Feb 18, 2020

shilman commented Feb 19, 2020

ohelixa commented Feb 26, 2020 • edited

mrmckeb commented Mar 1, 2020

aericson commented Mar 2, 2020

stale bot commented Mar 23, 2020

kevinccbsg commented Mar 24, 2020

vertic4l commented Mar 24, 2020 • edited

vertic4l commented Mar 24, 2020 • edited

stale bot commented Apr 14, 2020

stale bot commented May 15, 2020

ConnorDY commented Feb 6, 2020 •

edited

shilman commented Feb 7, 2020 •

edited

shilman commented Feb 8, 2020 •

edited

vertic4l commented Feb 10, 2020 •

edited

shilman commented Feb 10, 2020 •

edited

vertic4l commented Feb 10, 2020 •

edited

vertic4l commented Feb 10, 2020 •

edited

ConnorDY commented Feb 11, 2020 •

edited

ConnorDY commented Feb 11, 2020 •

edited

mrmckeb commented Feb 13, 2020 •

edited

ohelixa commented Feb 26, 2020 •

edited

vertic4l commented Mar 24, 2020 •

edited

vertic4l commented Mar 24, 2020 •

edited