Unable to build Stoybook #10970

igreulich · 2020-05-28T20:12:30Z

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

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

matheo · 2020-05-29T01:11:51Z

@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: #9777

igreulich · 2020-05-29T02:38:08Z

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 · 2020-05-29T02:40:16Z

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

matheo · 2020-05-29T03:29:08Z

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

igreulich · 2020-05-29T13:36:18Z

@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 · 2020-06-01T15:17:44Z

@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 · 2020-06-01T15:20:20Z

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

Thanks.

shilman · 2020-06-01T15:23:40Z

@igreulich which plugins were those?

igreulich · 2020-06-01T15:34:55Z

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 · 2020-06-02T15:49:50Z

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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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), :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 · 2020-06-02T16:02:16Z

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 · 2020-06-05T17:46:30Z

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 · 2020-06-05T21:51:37Z

@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 · 2020-06-08T15:29:17Z

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 · 2020-06-08T15:36:53Z

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 · 2020-06-08T20:15:51Z

@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 · 2020-06-09T08:57:51Z

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 · 2020-07-03T03:19:05Z

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-08-02T05:01:51Z

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 react build-storybook question / support labels May 29, 2020

stale bot added the inactive label Jul 3, 2020

stale bot closed this as completed Aug 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to build Stoybook #10970

Unable to build Stoybook #10970

igreulich commented May 28, 2020

matheo commented May 29, 2020 •

edited

Loading

igreulich commented May 29, 2020

shilman commented May 29, 2020

matheo commented May 29, 2020

igreulich commented May 29, 2020

igreulich commented Jun 1, 2020

igreulich commented Jun 1, 2020

shilman commented Jun 1, 2020

igreulich commented Jun 1, 2020

igreulich commented Jun 2, 2020

igreulich commented Jun 2, 2020

igreulich commented Jun 5, 2020

matheo commented Jun 5, 2020

Emidomenge commented Jun 8, 2020

igreulich commented Jun 8, 2020

igreulich commented Jun 8, 2020

Emidomenge commented Jun 9, 2020

stale bot commented Jul 3, 2020

stale bot commented Aug 2, 2020

Unable to build Stoybook #10970

Unable to build Stoybook #10970

Comments

igreulich commented May 28, 2020

matheo commented May 29, 2020 • edited Loading

igreulich commented May 29, 2020

shilman commented May 29, 2020

matheo commented May 29, 2020

igreulich commented May 29, 2020

igreulich commented Jun 1, 2020

igreulich commented Jun 1, 2020

shilman commented Jun 1, 2020

igreulich commented Jun 1, 2020

igreulich commented Jun 2, 2020

igreulich commented Jun 2, 2020

igreulich commented Jun 5, 2020

matheo commented Jun 5, 2020

Emidomenge commented Jun 8, 2020

igreulich commented Jun 8, 2020

igreulich commented Jun 8, 2020

Emidomenge commented Jun 9, 2020

stale bot commented Jul 3, 2020

stale bot commented Aug 2, 2020

matheo commented May 29, 2020 •

edited

Loading