Storybook: Unable to build Stoybook

[igreulich]

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

Steps to reproduce the behavior:

1. Go to your project root.
2. run yarn build-storybook -c .storybook -o docs
3. 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

[matheo]

@igreulich please google your error messages before creating new issues.

I see many coincidences in the vue repos, and also this thread in Storybook itself: https://github.com/storybookjs/storybook/issues/9777

[igreulich]

First I’ll take a look at that issue. Thanks for pointing that out.

Second I did. I didn’t come across that particular issue. And I even went so far as to look at all the issues tagged with ‘build-storybook’.

Also I am not using ‘create-react-app’ OR ‘vue’ so why would I assume issues related to those had fixes for me? I don’t have a lot of time at work (or in the rest of my day either, for that matter) to read through all 10k issues storybook has had to try and find stuff that might be related to my issue.

[shilman]

Does it run OK in dev mode? Are there any browser console errors?

[matheo]

@igreulich the keywords in your log are:
ERR! No module factory available for dependency type: CssDependency

[igreulich]

@shilman Storybook does run in dev mode.

And I am looking into the ticket mentioned above. Though (to my current understanding) in the end, it looks like the work around there is to use a different version of the react scripts that powers create-react-app, which I am not using. (CRA, or react-scripts)

The version of mini-css-extract-plugin we had installed was 0.8.2. Dropping down to 0.8.0 fails to build because of our .svg files. I don't know if that farther along the build process, then the CssDependency error I had before or not.

With '0.8.0' installed, everything still runs in dev as well.

I am going to poke around in the Storybook main.js and see if adding my app plugins helps.

[igreulich]

@shilman Storybook does run in dev mode.

And I am looking into the ticket mentioned above. Though (to my current understanding) in the end, it looks like the work around there is to use a different version of the react scripts that powers create-react-app, which I am not using. (CRA, or react-scripts)

The version of mini-css-extract-plugin we had installed was 0.8.2. Dropping down to 0.8.0 fails to build because of our .svg files. I don't know if that farther along the build process, then the CssDependency error I had before or not.

With '0.8.0' installed, everything still runs in dev as well.

I am going to poke around in the Storybook main.js and see if adding my app plugins helps.

[igreulich]

After poking things, the error was solved by adding my plugins to the build.

Thanks.

[shilman]

@igreulich which plugins were those?

[igreulich]

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]

Well the issue is back.

I was able to build successfully 1 time after including my plugins.

      plugins: [
        ...config.plugins,
        ...plugins,
      ],

Now I did it that way because I have no idea what plugins Storybook uses, nor am I trying to add yours to my config.

I have deleted node_modules, the previous build, and my yarn.lock. I tried pinning my version of mini-css-extract-plugin to 0.7.0, 0.8.0, and 0.9.0, deleting all of the above between each attempts to build.

Versions 0.7.0 and 0.9.0 both give the same error message:

Long Error Message

λ 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 (17 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.
env of Storybook process PRODUCTION
info => Compiling preview..
ERR! => Failed to build the preview
ERR! ./src/components/icon/icon.less
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/igreulich/apps/celula/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
ERR!     at compile (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./src/components/icon/ProductIcon.jsx 1:639-659
ERR!  @ ./src/components/icon/index.js
ERR!  @ ./src/components/icon/SecondaryIcon.stories.mdx
ERR!  @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(jsx|mdx))$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
ERR! ./src/components/form-controls/radio/radio-group.less
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/igreulich/apps/celula/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
ERR!     at compile (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./src/components/form-controls/radio/RadioGroup.jsx 1:165-192
ERR!  @ ./src/components/form-controls/radio/index.js
ERR!  @ ./src/components/form-controls/radio/Radio.stories.mdx
ERR!  @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(jsx|mdx))$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
ERR! ./src/components/form-controls/radio/radio.less
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/igreulich/apps/celula/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
ERR!     at compile (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./src/components/form-controls/radio/Radio.jsx 1:167-188
ERR!  @ ./src/components/form-controls/radio/index.js
ERR!  @ ./src/components/form-controls/radio/Radio.stories.mdx
ERR!  @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(jsx|mdx))$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
ERR! ./src/components/button/button.less
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/igreulich/apps/celula/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
ERR!     at compile (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./src/components/button/Button.jsx 1:594-616
ERR!  @ ./src/components/button/index.js
ERR!  @ ./src/components/button/Button.stories.mdx
ERR!  @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(jsx|mdx))$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
ERR! ./src/components/form-controls/checkbox/checkbox-group.less
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/igreulich/apps/celula/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
ERR!     at compile (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./src/components/form-controls/checkbox/CheckboxGroup.jsx 1:4731-4761
ERR!  @ ./src/components/form-controls/checkbox/index.js
ERR!  @ ./src/components/form-controls/checkbox/CheckboxGroup.stories.mdx
ERR!  @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(jsx|mdx))$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
ERR! ./src/components/form-controls/checkbox/checkbox.less
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/igreulich/apps/celula/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
ERR!     at compile (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./src/components/form-controls/checkbox/Checkbox.jsx 1:3548-3572
ERR!  @ ./src/components/form-controls/checkbox/index.js
ERR!  @ ./src/components/form-controls/checkbox/CheckboxGroup.stories.mdx
ERR!  @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(jsx|mdx))$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
ERR! ./src/components/toggle-button/toggle-button.less
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/igreulich/apps/celula/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
ERR!     at compile (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./src/components/toggle-button/ToggleButton.jsx 1:240-269
ERR!  @ ./src/components/toggle-button/index.js
ERR!  @ ./src/components/toggle-button/ToggleButton.stories.mdx
ERR!  @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(jsx|mdx))$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
ERR! ./src/components/toggle-button/toggle-button-group.less
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/igreulich/apps/celula/node_modules/mini-css-extract-plugin/dist/loader.js:168:24)
ERR!     at compile (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/igreulich/apps/celula/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/Users/igreulich/apps/celula/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/Users/igreulich/apps/celula/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./src/components/toggle-button/ToggleButtonGroup.jsx 1:665-700
ERR!  @ ./src/components/toggle-button/index.js
ERR!  @ ./src/components/toggle-button/ToggleButton.stories.mdx
ERR!  @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(jsx|mdx))$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
(node:22976) UnhandledPromiseRejectionWarning: [object Object]
(node:22976) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:22976) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

While 0.8.0 give the same error message included in the original issue.

[igreulich]

I have now tried adding a resolutions block, since I am using yarn.

"resolutions": {
  "mini-css-extract-plugin": "0.9.0"
}

But that did not improve the situation at all.

Though with mini-css-extract-plugin 0.9.0 and the resolutions block, I am getting the same error message that 0.8.0 was giving without the resolutions block.

[igreulich]

While working on another task in my application, I can across an import bug. I _thought_ that fixing that might have been the solution to my problem, but it was not.

The build process is still broken.

Any thoughts @shilman?

[matheo]

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

[Emidomenge]

Same issue here.

I'm using those libs:

    "@storybook/addon-actions": "^5.2.8",
    "@storybook/addon-backgrounds": "^5.2.8",
    "@storybook/addon-links": "^5.2.8",
    "@storybook/addon-viewport": "^5.2.8",
    "@storybook/addons": "^5.2.8",
    "@storybook/react": "^5.2.8",
    "storybook-addon-material-ui": "^0.9.0-alpha.21",
    "storybook-react-router": "^1.0.8"

with following logs:

4:49:27 PM: > build-storybook -c .storybook -o .storybook-dist "--quiet" "-o" "build/storybook" 4:49:28 PM: info 4:49:28 PM: @storybook/react v5.2.8 4:49:28 PM: info 4:49:28 PM: info clean outputDir.. 4:49:28 PM: info => Copying prebuild dll's.. 4:49:28 PM: info => Building manager.. 4:49:28 PM: info => Loading manager config.. 4:49:28 PM: info => Loading presets 4:49:29 PM: info => Loading custom addons config. 4:49:29 PM: info 4:49:29 PM: => Compiling manager.. 4:49:30 PM: Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade` 4:49:49 PM: info => manager built (21 s) 4:49:49 PM: info => Building preview.. 4:49:49 PM: info => Loading preview config.. 4:49:49 PM: info 4:49:49 PM: => Loading presets 4:49:49 PM: info 4:49:49 PM: => Using default Webpack setup. 4:49:49 PM: info => Loading create-react-app config. 4:49:49 PM: info => Compiling preview.. 4:49:53 PM: ERR! => Failed to build the preview 4:49:53 PM: ERR! No module factory available for dependency type: CssDependency 4:49:53 PM: /opt/build/repo/node_modules/neo-async/async.js:16 4:49:53 PM: throw new Error('Callback was already called.'); 4:49:53 PM: ^ 4:49:53 PM: Error: Callback was already called. 4:49:53 PM: at throwError (/opt/build/repo/node_modules/neo-async/async.js:16:11) 4:49:53 PM: at /opt/build/repo/node_modules/neo-async/async.js:2818:7 4:49:53 PM: at process._tickCallback (internal/process/next_tick.js:61:11)

[igreulich]

I figured out the issue. For the working build, I used...

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

After which I saw that configType exists. So I switched to
if (configType === 'production') { plugins.push( new MiniCssExtractPlugin({ filename: '[name].min.css', }), ); }

configType reports in all caps. config.mode does not.

[igreulich]

@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,
      ],
    };
  },
};

[Emidomenge]

Appreciate the help @igreulich.

My project environment is a bit different than yours since it's running with create react app.

I don't have a main.js file inside my .storybook folder.

But I succeed to solve the issue by doing those steps:

• Upgrading storybook to version: v5.3.19
• Installing @storybook/preset-create-react-app

Now it works fine. :)

[stale[bot]]

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]]

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!