Storybook adding webpack 4 (and other older dependencies) on a webpack 5 install.

[SnakeSVx]

Describe the bug

Storybook seems to be added webpack 4 as dependency even though webpack 5 is being used.

npm install warnings:

• npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
• npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.

To Reproduce

Latest nx version workspace with storybook installed.

System
Please paste the results of npx sb@next info here.

Additional context

Remove the webpack 4 dependency or make it optional. So that you can either pick webpack 4 or webpack 5.

[shilman]

@SnakeSVx this is planned for 7.0 since it's a breaking change. we've also started prebundling some of our dependencies to avoid conflicts with user dependencies, and this change will hopefully make it into 6.5.

[BenRacicot]

Just to clarify, Storybook is not compatible with Angular 13+ until V7?

[shilman]

@BenRacicot storybook is compatible with Angular 13

[SnakeSVx]

@SnakeSVx this is planned for 7.0 since it's a breaking change. we've also started prebundling some of our dependencies to avoid conflicts with user dependencies, and this change will hopefully make it into 6.5.

After upgrading to npm 8 there is a workaround that can be done for this as well by forcing the webpack version. This prevents the old webpack and it's dependencies to be added to the node_modules. (cleans up about 200 dependencies).

[BenRacicot]

@shilman thanks for responding. Is there a demo project available to reference? I've ran through all the docs and have errors everywhere when adding SB to my project. (which seem to relate to this issue, btw)

[shilman]

@BenRacicot does this work for you? https://github.com/storybookjs/repro-templates/tree/next/angular cc @yannbf

[BenRacicot]

@shilman I don't want to hijack this issue but no it's still not clear. That demo has no angular.json file so not sure what purpose that project serves. Perhaps the answer is there but I can't see it.

Looking at storybook.js.org/docs/angular/get-started/install it seems there is an issue with the instructions.

npx storybook init installs SB into your projects root. I don't think this is what the author is saying to do but please correct me.

Further down the page it seems to be saying that SB must be installed in its own Angular workspace? If so maybe the docs can be updated to explain that SB cannot be simply added to your project with npx storybook init?

[shilman]

@BenRacicot there's an angular.json file right here https://github.com/storybookjs/repro-templates/blob/next/angular/angular.json

[BenRacicot]

My apologies, yes that exists, but it does not match the docs instructions.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).