5.3.x Failed to build the preview with sass #9462

vinceumo · 2020-01-15T12:31:18Z

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 webpack-contrib/mini-css-extract-plugin#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

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

shilman · 2020-01-15T13:14:58Z

@vinceumo @ndelangen Any idea what's going on here? Is it due to an upgrade to mini-css-extract-plugin between 5.2 and 5.3?

michaelmior · 2020-01-15T18:19:21Z

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

michaelmior · 2020-01-15T18:27:03Z

Things also seem fine with mini-css-extract-plugin 0.9.0, but I haven't looked closely so this may have already been fixed upstream.

ndelangen · 2020-01-16T12:20:55Z

I've seen this error too at some point when upgrading that exact same package. downgrading fixed it too.

ConnorDY · 2020-01-17T13:43:55Z

Downgrading from 0.9.0 to 0.7.0 did not resolve the issue for me. I'm seeing the exact same error mentioned in the original post still.

michaelmior · 2020-01-17T18:22:34Z

I believe the current version specified is 0.8.0. For me, both an upgrade to 0.9.0 and a downgrade to 0.7.0 seemed to fix the issue.

jcousins-ynap · 2020-01-20T14:43:47Z

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 · 2020-01-20T15:00:24Z

I can solve the mini-css-extract-plugin error by adding @storybook/preset-create-react-app to my addons, but then that breaks all by stories.

Module parse failed: Unexpected token with the error pointing to a JSX component.

Full error

WARN ./components/paragraph/paragraph.stories.js 25:29 WARN Module parse failed: Unexpected token (25:29) WARN You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders WARN | WARN | storiesOf('Paragraph', module) WARN > .addDecorator((storyFn) => {storyFn()})

michaelmior · 2020-01-20T15:07:52Z

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

chachaxw · 2020-01-20T16:19:41Z

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

ptocheia · 2020-01-21T18:16:33Z

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.

KyorCode · 2020-01-27T14:52:42Z

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.

ndelangen · 2020-01-27T18:33:14Z

Hmm, that's likely because:

storybook/app/react/src/server/cra-config.ts

Line 193 in 89930ce

if (baseConfig.mode === 'production') {

BillBrower · 2020-01-27T18:49:34Z

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

shilman · 2020-01-30T13:51:08Z

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 · 2020-02-02T07:26:12Z

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!

ConnorDY · 2020-02-04T15:46:32Z

@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.');

shilman · 2020-02-04T16:00:13Z

@ConnorDY did you try removing node_modules (& possibly lockfile) and reinstalling?

ConnorDY · 2020-02-04T16:40:24Z

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

shilman added configuration babel / webpack bug compatibility with other tools labels Jan 15, 2020

shilman added this to the 5.3.x milestone Jan 15, 2020

shilman assigned ndelangen Jan 16, 2020

shilman added the dependencies label Jan 16, 2020

shilman added this to 5.3 bugs in Hotlist Jan 16, 2020

shilman mentioned this issue Jan 25, 2020

5.3 Upgrade SCSS no longer loading #9628

Closed

ndelangen mentioned this issue Jan 27, 2020

Merge pull request #9652 from storybookjs/fix/9462-sass-loading #9652

Merged

shilman closed this as completed Jan 30, 2020

shilman removed this from 5.3 bugs in Hotlist Feb 2, 2020

ConnorDY mentioned this issue Feb 11, 2020

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

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

5.3.x Failed to build the preview with sass #9462

5.3.x Failed to build the preview with sass #9462

vinceumo commented Jan 15, 2020 •

edited

shilman commented Jan 15, 2020

michaelmior commented Jan 15, 2020

michaelmior commented Jan 15, 2020 •

edited

ndelangen commented Jan 16, 2020

ConnorDY commented Jan 17, 2020

michaelmior commented Jan 17, 2020

jcousins-ynap commented Jan 20, 2020

jcousins-ynap commented Jan 20, 2020 •

edited

michaelmior commented Jan 20, 2020

chachaxw commented Jan 20, 2020

ptocheia commented Jan 21, 2020

KyorCode commented Jan 27, 2020 •

edited

ndelangen commented Jan 27, 2020

BillBrower commented Jan 27, 2020

shilman commented Jan 30, 2020

shilman commented Feb 2, 2020

ConnorDY commented Feb 4, 2020

shilman commented Feb 4, 2020

ConnorDY commented Feb 4, 2020

5.3.x Failed to build the preview with sass #9462

5.3.x Failed to build the preview with sass #9462

Comments

vinceumo commented Jan 15, 2020 • edited

shilman commented Jan 15, 2020

michaelmior commented Jan 15, 2020

michaelmior commented Jan 15, 2020 • edited

ndelangen commented Jan 16, 2020

ConnorDY commented Jan 17, 2020

michaelmior commented Jan 17, 2020

jcousins-ynap commented Jan 20, 2020

jcousins-ynap commented Jan 20, 2020 • edited

michaelmior commented Jan 20, 2020

chachaxw commented Jan 20, 2020

ptocheia commented Jan 21, 2020

KyorCode commented Jan 27, 2020 • edited

ndelangen commented Jan 27, 2020

BillBrower commented Jan 27, 2020

shilman commented Jan 30, 2020

shilman commented Feb 2, 2020

ConnorDY commented Feb 4, 2020

shilman commented Feb 4, 2020

ConnorDY commented Feb 4, 2020

vinceumo commented Jan 15, 2020 •

edited

michaelmior commented Jan 15, 2020 •

edited

jcousins-ynap commented Jan 20, 2020 •

edited

KyorCode commented Jan 27, 2020 •

edited