[Bug] Can't be installed with npm

[dartess]

Describe the bug

Can't be installed with npm if already used sass-loader@13

Steps to reproduce the behavior

1. npm i sass-loader
2. npm i @storybook/addon-styling

Expected behavior

should work

Screenshots and/or logs

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @storybook/addon-styling@0.3.2
npm ERR! Found: sass-loader@13.2.2
npm ERR! node_modules/sass-loader
npm ERR!   dev sass-loader@"^13.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional sass-loader@"^10.4.1" from @storybook/addon-styling@0.3.2
npm ERR! node_modules/@storybook/addon-styling
npm ERR!   @storybook/addon-styling@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: sass-loader@10.4.1
npm ERR! node_modules/sass-loader
npm ERR!   peerOptional sass-loader@"^10.4.1" from @storybook/addon-styling@0.3.2
npm ERR!   node_modules/@storybook/addon-styling
npm ERR!     @storybook/addon-styling@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Environment

• Node.js version: v18.12.0
• NPM version: 8.19.2

[ShaunEvening]

@dartess that's annoying! Sorry about that.

I've added this to my list of things to patch this week. In the meantime, you should be able to resolve this by installing the peerDep version of sass-loader like so:

npm install -D sass-loader@10.4.1

[sgarcia-dev]

Hi @Integrayshaun ! Do you know by any chance if that fix might resolve this one we're getting trying to set up storybook 7 on a brand new project? We're trying to add tailwind support to storybook, but a dependency conflict is blocking this.

npm install --D @storybook/addon-styling
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: typing-com-react@1.0.0
npm ERR! Found: @storybook/addons@7.0.2
npm ERR! node_modules/@storybook/addons
npm ERR!   @storybook/addons@"7.0.2" from @storybook/builder-webpack5@7.0.2
npm ERR!   node_modules/@storybook/builder-webpack5
npm ERR!     @storybook/builder-webpack5@"7.0.2" from @storybook/react-webpack5@7.0.2
npm ERR!     node_modules/@storybook/react-webpack5
npm ERR!       dev @storybook/react-webpack5@"^7.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @storybook/addon-styling@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @storybook/addons@6.5.16
npm ERR! node_modules/@storybook/addons
npm ERR!   peer @storybook/addons@"^6.5.8" from @storybook/addon-styling@0.3.2
npm ERR!   node_modules/@storybook/addon-styling
npm ERR!     dev @storybook/addon-styling@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Thank you!

[PascalvdHoek]

Is the patch for making it compatible with storybook 7 on the radar as well? Please let me know if I can help you with that :)

[ShaunEvening]

@sgarcia-dev & @PascalvdHoek

I'm aiming to have a full release that works for Storybook 7 tomorrow.

In the mean time, install the prerelease by running:

npm install -D @storybook/addon-styling@next

[ameetmadan]

+1 for staying updated on this issue. Thanks for all your work @Integrayshaun!

[ShaunEvening]

Hey friends!

Just testing out a potential fix! @dartess can you try installing @storybook/addon-styling@1.0.1-canary.23.e27b5d4.0 and tell me if this unblocks you?

[dartess]

@Integrayshaun Yes, the installation was successful! In a hurry, I was able to launch and configure support for scss, but so far I have not been able to just take and enable cssModules: true, so far I'm getting an error

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options.modules should be one of these:
...

with next config:

{
  name: "@storybook/addon-styling",
  options: {
    sass: {
      includePaths: [path.resolve('./src/shared/view/styles/')],
    },
    cssModules: true,
  },
},

But probably I have not figured out the documentation yet.

[ShaunEvening]

@dartess Ahhhh shoot, okay, I've made a change to the css modules config! How about now this version? @storybook/addon-styling@1.0.1-canary.23.c40d3f8.0

[dartess]

@Integrayshaun yeah, it just work for me

[ShaunEvening]

@dartess Perfect! version 1.0.0 is officially out for you to upgrade to