[Bug] Some DevDependencies are installed as dependencies. This can lead to conflicts if, for example, prettier 3.0.0 is used

[salzpate]

Describe the bug

Some DevDependencies are installed as dependencies. This can lead to conflicts if, for example, prettier 3.0.0 is used.

Steps to reproduce the behavior

1. Create a sub project with a peer dependency of prettier@^3.0.0
2. Create a main project
3. Add "@storybook/addon-styling@latest" as dev dependency to the main project
4. 3. Add "prettier@^3.0.0" as dev dependency to the main project
5. Add the created sub project to the main project
6. Tryout an npm install

Expected behavior

Add Dev Dependencies as devDependencies:

"devDependencies": {
"@babel/template": "^7.20.7",
"@babel/types": "^7.21.5",
"css-loader": "^6.7.3",
"less-loader": "^11.1.0",
"postcss-loader": "^7.2.4",
"prettier": "^2.8.0",
"resolve-url-loader": "^5.0.0",
"sass-loader": "^13.2.2",
"style-loader": "^3.3.2"
}

Screenshots and/or logs

Found: [email protected]
npm ERR! node_modules/prettier
npm ERR! dev prettier@"^2.8.8" from the root project
npm ERR! prettier@"^2.8.0" from @storybook/[email protected]

Environment

• Node.js version: [e.g. v18.12.0]
• NPM version: [e.g. 9.7.2]

[ShaunEvening]

Hey @salzpate 👋

I'm sorry for the frustration but with the way this addon currently work, all of those packages are dependencies to make sure that webpack can be configured properly for the use cases it supports as well as the configuration scripts.

I'm actively working on v2 which changes the API to avoid this all together.

If you're interested i'd love your help in testing it out for your use case?

[salzpate]

Ok, then it's understandable why you didn't take dev dependencies. Sure, just let me know and I'll test the new version.

[ShaunEvening]

@salzpate, Amazing! Thank you for your help!

Can you share the contents of your main.(ts|js) with me so that I can provide next steps?

[salzpate]

In the main.ts file are only some exports of some components of a component library

[ShaunEvening]

Sorry @salzpate, I mean your .storybook/main.ts

[salzpate]

.storybook/main.ts:

`const path = require('path');

const babelConfig = require('../babel.config.js');

module.exports = {
stories: ['../stories/**/*.stories.tsx'],
addons: [
'@storybook/addon-links',
'@storybook/addon-styling',
'@storybook/addon-essentials',
],
features: {
postcss: false,
},
webpackFinal: async (config) => {
config.resolve.extensions = ['.mjs', '.ts', '.tsx', '.js', '.json'];

config.module.rules.push({
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        ...babelConfig,
      },
    },
  ],
});

config.module.rules.push({
  test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto',
});

config.module.rules.push({
  test: /\.s[ac]ss$/i,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});

return config;

},
typescript: {
check: true
},
framework: {
name: '@storybook/react-webpack5',
options: {}
},
docs: {
autodocs: true
}
};
`

[ShaunEvening]

Hey @salzpate So there's a couple of things we'll need to do.

1. Remove @storybook/addon-styling from main.ts
2. Remove @storybook/addon-styling from your dependencies
3. Remove the sass rule from webpackFinal in main.ts
4. Run npx storybook@latest add @storybook/addon-styling-webpack
5. Follow the prompts to get the addon configured

This should add the new addon to your dependencies and your storybook config with the webpack rules that you need.

[salzpate]

After the command:

npx storybook@latest add @storybook/addon-styling-webpack

the addon is installed and set in the main.js file but I get an error:

TypeError [ERR_INVALID_ARG_TYPE]: The "file" argument must be of type string. Received undefined

And tailwindcss styling is not loaded in storybook

[ShaunEvening]

Hey @salzpate thank you for getting back to me :)

I have a fix for the type error that i'm waiting to get patched back into the Storybook CLI for 7.4.1

In the mean time you can run npx @storybook/auto-config styling to configure the addon for you :)