[src/generators/WEB-COMPONENTS] Missing dependency in generated application

[notbear]

Describe the bug
Cannot run the storybook instance created by cli with web_components template. The example tries to import missing lit-html.

To Reproduce
Steps to reproduce the behavior:

1. Init a new project in some directory: npm init.
2. Run: npx -p @storybook/cli sb init -t web_components
3. Run: npm run storybook
4. See error as below:

Module not found: Error: Can't resolve 'lit-html' in '/home/harry/workds/dkads-web/packages/tmp/node_modules/@storybook/web-components/dist/client/preview'

Expected behavior
The project should compile and run without any error.

Note: the simpliest solution would be to install missing lit-html in the project. But in my opinion the example story should not impose any arbitrary library.

System:
System:
OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Binaries:
Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
Browsers:
Chrome: 80.0.3987.87
Firefox: 72.0.2
npmPackages:
@storybook/web-components: ^5.3.13 => 5.3.13

Additional context
Console output:

❯ npx -p @storybook/cli sb init -t web_components

 sb init - the simplest way to add a storybook to your project. 

 • Installing Storybook for user specified project type. ✓
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

> core-js@3.6.4 postinstall /home/harry/workds/dkads-web/packages/tmp/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js-pure@3.6.4 postinstall /home/harry/workds/dkads-web/packages/tmp/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall /home/harry/workds/dkads-web/packages/tmp/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @storybook/web-components@5.3.13 requires a peer of lit-html@^1.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN tmp@1.0.0 No description
npm WARN tmp@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ babel-loader@8.0.6
+ @babel/core@7.8.4
+ @storybook/web-components@5.3.13
added 1091 packages from 791 contributors and audited 18530 packages in 33.757s

73 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

. ✓
 • Preparing to install dependencies. ✓

npm WARN @storybook/web-components@5.3.13 requires a peer of lit-html@^1.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN tmp@1.0.0 No description
npm WARN tmp@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

audited 18530 packages in 3.927s

73 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


 • Installing dependencies. ✓

To run your storybook, type:

   npm run storybook 

For more information visit: https://storybook.js.org

❯ npm run storybook

> tmp@1.0.0 storybook /home/harry/workds/dkads-web/packages/tmp
> start-storybook -p 6006

info @storybook/web-components v5.3.13
info 
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
webpack built 1558503419ea23081619 in 5466ms
✖ ｢wdm｣: Hash: 1558503419ea23081619
Version: webpack 4.41.6
Time: 5466ms
Built at: 02/13/2020 11:53:55 AM
                                          Asset      Size        Chunks                                Chunk Names
                                    iframe.html   3.1 KiB                [emitted]                     
            main.1558503419ea23081619.bundle.js  11.3 KiB          main  [emitted] [immutable]         main
        main.1558503419ea23081619.bundle.js.map     4 KiB          main  [emitted] [dev]               main
    runtime~main.1558503419ea23081619.bundle.js  31.2 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.1558503419ea23081619.bundle.js.map  32.3 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.1558503419ea23081619.bundle.js  2.37 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.1558503419ea23081619.bundle.js.map  2.42 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.1558503419ea23081619.bundle.js runtime~main.1558503419ea23081619.bundle.js.map vendors~main.1558503419ea23081619.bundle.js vendors~main.1558503419ea23081619.bundle.js.map main.1558503419ea23081619.bundle.js main.1558503419ea23081619.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true 76 bytes {main} [built]
[./.storybook/generated-entry.js] 240 bytes {main} [built]
[./.storybook/preview.js] 715 bytes {main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/web-components/dist/client/index.js] 1.92 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23.5 KiB {vendors~main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] (webpack)-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {vendors~main} [built]
    + 609 hidden modules

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/home/harry/workds/dkads-web/packages/tmp/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./stories/index.stories.js
Module not found: Error: Can't resolve 'lit-html' in '/home/harry/workds/dkads-web/packages/tmp/stories'
 @ ./stories/index.stories.js 47:0-32 53:9-13 56:9-13 62:9-13 68:9-13
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.34 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.13 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

[shilman]

@daKmoR do we need to add a peer dependency for this?

[daKmoR]

it already has a peer dependency 🙈
https://github.com/storybookjs/storybook/blob/next/app/web-components/package.json#L55

we could install it by default in the cli?

[shilman]

@daKmoR CLI install sounds reasonable to me if it's not already installed

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[notbear]

Verified with @storybook/web-components v6.1.14