@storybook/angular has dependencies that should be peerDependencies

[kroeder]

Bug or support request summary

After updating my storybook to alpha.25 I got a strange error from webpack. After some investigations I found out that webpack-sources was installed twice, by

• @angular-devkit/build-angular@0.7.1 => webpack-sources@1.1.0
• @storybook/angular@4.0.0-alpha.25 => webpack-sources@1.3.0

This mostly is because my local @angular / webpack version differs from the one's storybook is requiring.

Edit: this throws an error in build-storybook and prevents building it.

Steps to reproduce

• Install "@angular-devkit/build-angular": "~0.7.1",
• Install @storybook/angular@4.0.0-alpha.25
• Try to build storybook / or npm ll webpack-sources

Please specify which version of Storybook and optionally any affected addons that you're running

    "@storybook/addon-actions": "4.0.0-alpha.25",
    "@storybook/addon-knobs": "4.0.0-alpha.25",
    "@storybook/addon-links": "4.0.0-alpha.25",
    "@storybook/addon-notes": "4.0.0-alpha.25",
    "@storybook/addon-options": "4.0.0-alpha.25",
    "@storybook/addon-storysource": "4.0.0-alpha.25",
    "@storybook/addons": "4.0.0-alpha.25",
    "@storybook/angular": "4.0.0-alpha.25",

Work summary

I'd strongly recommend to set webpack as a peerDependency since @angular-devkit/build-angular has already a dependency on webpack.

Also, @storybook/angular is strongly bound to the webpack stuff in angular.

Who to contact

@igor-dv what do you think? In order to fix this in our project I would've to push versions around to match exactly storybooks dependencies. I find this odd tbh

[kroeder]

I found out that e ven the latest version of @angular-devkit/build-angular@0.8.5 depends on webpack@1.1.0 but storybook depends on the latest webpack version.

+-- @angular-devkit/build-angular@0.8.5
| | Angular Webpack Build Facade
| | git+https://github.com/angular/angular-cli.git
| | https://github.com/angular/angular-cli
| +-- @angular-devkit/build-optimizer@0.8.5
| | | Angular Build Optimizer
| | | git+https://github.com/angular/angular-cli.git
| | | https://github.com/angular/angular-cli
| | `-- webpack-sources@1.1.0  deduped
| |     Source code handling classes for webpack
| |     git+https://github.com/webpack/webpack-sources.git
| |     https://github.com/webpack/webpack-sources#readme
| +-- @ngtools/webpack@6.2.5
| | | Webpack plugin that AoT compiles your Angular components and modules.
| | | git+https://github.com/angular/angular-cli.git
| | | https://github.com/angular/angular-cli
| | `-- webpack-sources@1.1.0  deduped
| |     Source code handling classes for webpack
| |     git+https://github.com/webpack/webpack-sources.git
| |     https://github.com/webpack/webpack-sources#readme
| +-- mini-css-extract-plugin@0.4.4
| | | extracts CSS into separate files
| | | git+https://github.com/webpack-contrib/mini-css-extract-plugin.git
| | | https://github.com/webpack-contrib/mini-css-extract-plugin
| | `-- webpack-sources@1.1.0  deduped
| |     Source code handling classes for webpack
| |     git+https://github.com/webpack/webpack-sources.git
| |     https://github.com/webpack/webpack-sources#readme
| +-- uglifyjs-webpack-plugin@1.2.7
| | | UglifyJS plugin for webpack
| | | git+https://github.com/webpack-contrib/uglifyjs-webpack-plugin.git
| | | https://github.com/webpack-contrib/uglifyjs-webpack-plugin
| | `-- webpack-sources@1.1.0  deduped
| |     Source code handling classes for webpack
| |     git+https://github.com/webpack/webpack-sources.git
| |     https://github.com/webpack/webpack-sources#readme
| +-- webpack@4.20.2
| | | Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
| | | git+https://github.com/webpack/webpack.git
| | | https://github.com/webpack/webpack
| | `-- webpack-sources@1.3.0
| |     Source code handling classes for webpack
| |     git+https://github.com/webpack/webpack-sources.git
| |     https://github.com/webpack/webpack-sources#readme
| +-- webpack-sources@1.1.0
| |   Source code handling classes for webpack
| |   git+https://github.com/webpack/webpack-sources.git
| |   https://github.com/webpack/webpack-sources#readme
| `-- webpack-subresource-integrity@1.2.0
|   | Webpack plugin for enabling Subresource Integrity
|   | git+https://github.com/waysact/webpack-subresource-integrity.git
|   | https://github.com/waysact/webpack-subresource-integrity#readme
|   `-- webpack-sources@1.3.0
|       Source code handling classes for webpack
|       git+https://github.com/webpack/webpack-sources.git
|       https://github.com/webpack/webpack-sources#readme
`-- codegen-handlebars-templates-scripts@0.9.4
  | Create GraphQL Codegen templates easily with this Handlebars.
  `-- webpack@4.12.1
    | Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
    | git+https://github.com/webpack/webpack.git
    | https://github.com/webpack/webpack
    `-- webpack-sources@1.1.0  deduped
        Source code handling classes for webpack
        git+https://github.com/webpack/webpack-sources.git
        https://github.com/webpack/webpack-sources#readme

[igor-dv]

Might be related #4371
We have webpack as a dircet dep in many projects. Maybe we can make it a peer in part of the packages. And consider each framework individually. For example to keep it peer for angular, but to make it direct dep for react

CC @Hypnosphi

[kroeder]

It's exactly what #4371 is about - ng-packgr (a pretty good packaging tool for angular) even blocks every dependency in your library project except those that are on a package whitelist

Best-case: A package only ships peerDeps and a minimum of dependencies

See https://github.com/ng-packagr/ng-packagr/blob/master/docs/dependencies.md

[Hypnosphi]

@igor-dv If you know how to support both webpack 1 and 4, go ahead =)

[igor-dv]

hah =) I don't know black magic.

[igor-dv]

But hypothetically, if we were able to extract every webpack related code to something like @storybook/preset-webpack, then we were able to have:

• @storybook/preset-webpack@3
• @storybook/preset-webpack@4
• @storybook/preset-webpack@pikachu

[kroeder]

I'm closing this. I thought peers can be satisfied by second-level dependencies (in this case angular's dependency on webpack)

Without forcing users to add webpack as a dependency in the actual app or live with a "unmet peer dependency" warning, this is not possible