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

[chachaxw]

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

[KyorCode]

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.