storybook: 5.3.x Failed to build the preview with sass

Hi,

I have some issue with the latest version of Storybook 5.3.x, I’m upgrading from 5.2.8 to 5.3.3 (Same issue on 5.3.1).

Describe the bug

If I run yarn run storybook I get no issue Storybook start.

When I run yarn run build-storybook I get the following error:

ERR! => Failed to build the preview
ERR! Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! TypeError: this[MODULE_TYPE] is not a function

Full error

$ build-storybook
info @storybook/react v5.3.3
info 
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading custom manager config.
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Compiling manager..
info => manager built (7 s)
info => Building preview..
info => Loading preview config..
info => Loading presets
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading config/preview file in "./.storybook".
info => Using default Webpack setup.
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading create-react-app config.
info => Compiling preview..
ERR! => Failed to build the preview
ERR! ./src/test/_test.scss
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 /Users/211103/Documents/projects/storybook-test-webpack/node_modules/mini-css-extract-plugin/dist/loader.js:170:24
ERR!     at /Users/211103/Documents/projects/storybook-test-webpack/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR!     at /Users/211103/Documents/projects/storybook-test-webpack/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/211103/Documents/projects/storybook-test-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/211103/Documents/projects/storybook-test-webpack/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/211103/Documents/projects/storybook-test-webpack/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/211103/Documents/projects/storybook-test-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/211103/Documents/projects/storybook-test-webpack/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/211103/Documents/projects/storybook-test-webpack/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/211103/Documents/projects/storybook-test-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/211103/Documents/projects/storybook-test-webpack/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/211103/Documents/projects/storybook-test-webpack/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR!     at eval (eval at create (/Users/211103/Documents/projects/storybook-test-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at runMicrotasks (<anonymous>)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:93:5)
ERR!  @ ./src/test/test.stories.mdx 14:0-22
ERR!  @ ./src sync \.stories\.(mdx|js)$
ERR!  @ ./.storybook/config.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/config.js
(node:11148) UnhandledPromiseRejectionWarning: [object Object]
(node:11148) 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:11148) [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.
sysops-MacBook-Pro:storybook-test-webpack 211103$ yarn run storybook
yarn run v1.17.3
$ start-storybook -p 6006
info @storybook/react v5.3.3

The error seems related to this one https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73

To Reproduce

Clone this repo https://github.com/vinceumo/storybook-test-webpack/tree/5.3.x (Branch 5.3.x)
Run yarn
Run yarn run storybook (Project should run normally)
Run yarn run build-storybook (Project should Failed)

I’m on macOS node v12.13.0

I tried as well to use the new manager/preview/main js files and I get the same error.

Thanks a lot for your help

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 9
Comments: 19 (6 by maintainers)

Most upvoted comments

I fixed it by adding @storybook/preset-create-react-app how to config it

./.storybook/main.js (for Storybook 5.3.0 and newer)

module.exports = {
  addons: ['@storybook/preset-create-react-app'],
};

+12

chachaxw on Jan 20, 2020

What seemed to fix it for me was adding the following to the plugin section in a custom webpack.config.js file:

module.exports = ({ config, mode }) => {
config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].module.css'}));
}

It seems that the plugin declaration is missing in the default webpack config.

KyorCode on Jan 27, 2020

@jcousins-ynap In my case, I’m using yarn, so I used the resolutions feature. This allows you to override the version of a nested dependency. Here is the relevant part of my package.json.

michaelmior on Jan 20, 2020

@shilman I had previously nuked my node_modules folder but it looked like deleting my package-lock.json resolved the issue.

ConnorDY on Feb 4, 2020

@shilman Getting a new error now with the latest version of storybook when trying to build:

70% building 528/541 modules 13 active ~/Projects/bah-uswds/bah-react-uswds/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.jsERR! => 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.');

ConnorDY on Feb 4, 2020

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.10 containing PR #9652 that references this issue. Upgrade today to try it out!

shilman on Feb 2, 2020

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 containing PR #9652 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.

shilman on Jan 30, 2020

@KyorCode’s suggestion works in combination with downgrading mini-css-extract-plugin to 0.7.0 in your dev dependencies.

BillBrower on Jan 27, 2020

I was also having this issue. Downgrading mini-css-extract-plugin to 0.7.0 in devDependencies, and adding "mini-css-extract-plugin": "0.7.0" to my resolutions fixed this for me.

ptocheia on Jan 21, 2020

I’m seeing the same thing. Downgrading to mini-css-extract-plugin 0.7.0 fixes it for me.

How did you downgrade? This package isn’t in my list of dependencies.

jcousins-ynap on Jan 20, 2020