[Bug] Install @storybook/preset-scss with default storybook's bundler 'webpack4' doesn't works

[01oseluiz]

Describe the bug

Install @storybook/preset-scss with default storybook's bundler 'webpack4' doesn't works.

Steps to reproduce the behavior

1. get svelte template npx degit sveltejs/template my-app
2. navigate to app folder and install storybook cd my-app npx sb init
3. add the preset npm i -D @storybook/preset-scss css-loader sass sass-loader style-loader (NOTE: it is missing 'sass' depedency on the exemple at the file readme.md)
4. install all the dependencies npm i
5. change the file ./src/stories/button.css to ./src/stories/button.scss and the import at ./src/stories/Button.svelte to match the import file path
6. add the addon '@storybook/preset-scss', to the addons list at the file .storybook/main.js
7. run storybook npm run storybook

Expected behavior

To render normaly the button at the storybook's canvas

Screenshots and/or logs

ERROR in ./src/stories/button.scss
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/home/josel/devProjects/test/node_modules/style-loader/dist/index.js:19:24)
 @ ./src/stories/Button.svelte 17:0-23
 @ ./src/stories/Button.stories.svelte
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx|svelte))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/svelte/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

Environment

Environment Info:

  System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz
  Binaries:
    Node: 12.16.1 - ~/.asdf/installs/nodejs/12.16.1/bin/node
    Yarn: 1.22.10 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 6.13.4 - ~/.asdf/installs/nodejs/12.16.1/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12 
    @storybook/addon-essentials: ^6.3.12 => 6.3.12 
    @storybook/addon-links: ^6.3.12 => 6.3.12 
    @storybook/addon-svelte-csf: ^1.1.0 => 1.1.0 
    @storybook/svelte: ^6.3.12 => 6.3.12 

Additional context

After changing storybook's bundler to webpack5 (https://github.com/storybookjs/storybook/tree/next/lib/builder-webpack5), and fixing this another issue: https://github.com/storybookjs/addon-svelte-csf/issues/23, everthing works normally.

[hansonfang]

same issue

[72gm]

same issue here... and upgrading bundler to wp5 doesn't solve the problems for me : "Error: Cannot find module 'webpack/lib/util/makeSerializable.js'"

[zprjk]

Related PR with a fix: https://github.com/storybookjs/presets/pull/209

[Hecatron]

I recently ran into this issue I tried switching to webpack 5, but that seems to have compatibility issues with typescript at least for the way I've got this svelte project setup - https://github.com/storybookjs/storybook/issues/15148

so far the above PR seems to be the only fix in combination with webpack 4

[cornwe19]

Any update on this? I'm facing the same issue. PR was helpful, but doesn't seem like a long term plan