SCSS preset is not working with latest node-sass

riccardogiorato commented 3 years ago

Describe the bug

I followed this guide to configure SCSS in my storybook project: https://github.com/storybookjs/presets/tree/master/packages/preset-scss#basic-usage

when executing the project I would get this error coming from the "sass-loader" package

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader

I found out this issue almost identical on "nuxt"
the solution proposed was to install a supported version of "sass-loader@10.1.1" not the 11 version.

Possible Fix would be identical to this npm uninstall -D sass-loader && npm install -D sass-loader@10.1.1

spacebromx commented 3 years ago

I tried using sass-loader@10.1.1 but unfortunately it didn't work. I'm using these packages too:

@storybook/react: ^6.1.21
@storybook/preset-scss: ^1.0.3

massivelines commented 3 years ago

If you have sass-loader installed try changing the installed version to 10.1.1, that fixed it for me. v11 went out on Feb 5th and now requires webpack 5.

Think this also might fix the issue for 191

mbaranovski commented 3 years ago

In case someone initialised storybook to the existing create-react-app project, do the above (downgrade sass-loader to 10.1.1) and remove @storybook/preset-create-react-app from the .storybook/main.js file.

Thanks @riccardogiorato & @massivelines

6be709c0 commented 3 years ago

@mbaranovski can you share your package.json & main,js, having the same issue, doesn't solve the import scss

noahtallen commented 3 years ago

I'm guessing this is blocked until webpack 5 is supported in storybook core? There are some improvements in sass-loader v11 we'd like to use :)

EliuTimana commented 3 years ago

In case someone initialised storybook to the existing create-react-app project, do the above (downgrade sass-loader to 10.1.1) and remove @storybook/preset-create-react-app from the .storybook/main.js file.

Thanks @riccardogiorato & @massivelines

This works 👍🏾

PudparK commented 3 years ago

Can anyone take a look at my main.js and package.json to see if they can spot my issue ?🙏🏼 I tried downgrading sass-loader to 10.1.1 to no avail. For context, I'm using nextjs and trying to use styles.module.scss files. Here is the repository.

package.json

  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@size-limit/preset-small-lib": "^5.0.1",
    "@storybook/addon-essentials": "^6.3.0",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.3.0",
    "@storybook/addons": "^6.3.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.3.0",
    "@types/node": "^15.12.5",
    "@types/react": "^17.0.11",
    "@types/react-dom": "^17.0.8",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "husky": "^6.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "sass": "^1.35.1",
    "sass-loader": "10.1.1",
    "size-limit": "^5.0.1",
    "style-loader": "^3.0.0",
    "tsdx": "^0.14.1",
    "tslib": "^2.3.0",
    "typescript": "^4.3.4"
  },
  "dependencies": {
    "next": "^11.0.1"
  }

main.js

module.exports = {
  stories: ['../_components/**/*.stories.@(ts|tsx|js|jsx)', '../stories/**/*.stories.@(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
  typescript: {
    check: true, // type-check stories during Storybook build
  }
};

moonou commented 3 years ago

@PudparK I have same problem, you also need fixed style-loader version to 2.0.0, that's work for me.

1nfinity-5starZ commented 3 years ago

@moonou thanks, that fixed it for me. Downgrading sass-loader to v10 alone didn't help. After downgrading style-loader to v2, then the project compiled. Hope this gets more upvotes so people can see how to fix it.

PudparK commented 3 years ago

@moonou I finally got around to trying it out and it did indeed work. Thank you so much!

lawnchamp commented 3 years ago

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:

yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

MartinDawson commented 3 years ago

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:
yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

This is the solution. Absolutely terrible add-on if the basic readme.md doesn't even work.

Here's my full config seen as this is what infuriated me when people post their 'solutions'.

main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
  ],
};

package.json

  "dependencies": {,
    "sass": "^1.36.0"
  },
"devDependencies": {
    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/html": "^6.3.6",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/preset-scss": "^1.0.3",
    "css-loader": "5.2.6",
    "sass-loader": "10",
    "style-loader": "2.0.0",
  },

If you have the same packages as above it will finally work.

Complete waste of many hours due to this stupid plugin.

vrg-success commented 3 years ago

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:
yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

Tnx dude

MrJadaml commented 3 years ago

PR created to update preset-scss README

https://github.com/storybookjs/presets/pull/209

yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0

shennan commented 3 years ago

I also needed to downgrade css-loader to 5.2.6

noahtallen commented 3 years ago

Do we know if storybook has a plan to update to webpack 5?

MRezaSafari commented 3 years ago

if you get this error

ERROR in ./components/form/input/input.module.scss
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (G:\_TDD\NextApp\node_modules\style-loader\dist\index.js:19:24)
 @ ./components/form/input/index.tsx 1:0-41 8:15-21
 @ ./components/form/input/input.stories.tsx
 @ ./components sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.tsx)$
 @ ./.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/react/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/addDecorator.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

you should use this:

PR created to update preset-scss README

209
yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0

maheshsamudra commented 2 years ago

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:
yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

This worked for me as well! Thanks.

Megajjks commented 2 years ago

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:
yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

Thanks It's working

thewanionly commented 2 years ago

In case someone initialised storybook to the existing create-react-app project, do the above (downgrade sass-loader to 10.1.1) and remove @storybook/preset-create-react-app from the .storybook/main.js file.

Thanks @riccardogiorato & @massivelines

This works for me, thanks. It has been almost a year now since this issue is reported and sadly the issue still occurs. I hope this gets fixed soon.

movahedan commented 2 years ago

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:
yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

This one worked for me. After hours of debugging! Thank you.

bmitchinson commented 2 years ago

The following packages still aren't working with this SCSS preset. After trying the command from lawnchamp.

I'm attempting to use builder 5 so, maybe that's what's causing issues? Repo here

package.json

 "sass": "^1.53.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"svelte-loader": "^3.1.3"

main.js

const path = require('path');

module.exports = {
    stories: [
        '../src/**/*.stories.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)',
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
        '@storybook/preset-scss',
    ],
    framework: '@storybook/svelte',
    core: {
        builder: 'webpack5',
    },
};

aselcuk commented 1 year ago

i solved this problem in webpack version 5,

configure with webpack 5 npx sb init --builder webpack5
then remove the packages you installed for SCSS preset (@storybook/preset-scss, sass-loader, style-loader, css-loader etc.)
then install the package storybook-addon-sass-postcss yarn add -D storybook-addon-sass-postcss
add postcss.config.js file to root and add this code block

// postcss.config.js

module.exports = {
  // Add your installed PostCSS plugins here:
  plugins: [
    // require('autoprefixer'),
    // require('postcss-color-rebeccapurple'),
  ],
};

change main.js file config

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: 'storybook-addon-sass-postcss',
      options: {
        rule: {
          test: /\.(scss|sass)$/i,
        },
      },
    }
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

i hope it was helpful...

samuelfbtlh commented 1 year ago

Just my contribution:

I have mixed @thewanionly and @MartinDawson approaches

main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-scss"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

package.json


    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.5.16",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",
    "css-loader": "5.2.6",
    "sass-loader": "10",
    "style-loader": "2.0.0",
    "webpack": "^5.75.0"```

storybookjs / presets

SCSS preset is not working with latest node-sass #195

209