Stencil: Storybook generated config doesn't run

[pranav-js]

Describe the bug Storybook generated config doesn't work with Stencil buildable library.

To Reproduce Setup latest nx with stencil library. make library buildable. add storybook config and run command

Expected behavior generated config should work without error

Additional context What happens is below output

> nx run stencil-elements:storybook

  You have a webpack.config.js files in your Storybook configuration:
  - ".storybook/webpack.config.js"
  - "libs/stencil-elements/.storybook/webpack.config.js"

  Consider switching to the "webpackFinal" property declared in "main.js" instead.
  https://nx.dev/latest/angular/storybook/migrate-webpack-final

info => Loading presets
ℹ ｢wdm｣: wait until bundle finished:
/Users/pranav.sarda/Documents/GitHub/project/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13
    mainCompilation.fileSystemInfo.createSnapshot(
                                   ^

TypeError: Cannot read properties of undefined (reading 'createSnapshot')
    at /Users/pranav.sarda/Documents/GitHub/project/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (/Users/pranav.sarda/Documents/GitHub/project/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:12:10)
    at /Users/pranav.sarda/Documents/GitHub/project/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:219:35

Additional context I tried deleting nodemodules, package.lock.jsona and doing npm i --legacy-peer-deps as well, still same error. using Node 16.13.1, latest nx and "@nxext/stencil": "^13.1.0",

[pranav-js]

found the fix

now legacy peer deps don't work.

npm i --save-dev html-webpack-plugin

run this command and it started working

[pranav-js]

I will put a PR for this in coming days.

[pranav-js]

please consider adding typescript support

[DominikPieper]

@pranav-js hard to tell if it’s possible to add ts support. Wasn’t able to make it work work ts that’s why js files are the default yet. That was the default example I got for stencil and storybook from the storybook issue about stencil. Maybe it’s easier once the official stencil storybook plugin is ready

[pranav-js]

@DominikPieper oh okay. is anyone building such plugin already?

[DominikPieper]

@pranav-js as far as I know the Storybook Team and the Stencil Team are already talking about how to make it happen

[DominikPieper]

@pranav-js I tried it and in my experiment works like expected. Did you do a build before you run the storybook command? Unfortunately that's needed with how it's integrated right now ^^'

[DominikPieper]

I'll try some things to smooth this a little bit but unfortunately, it'll be more difficult than the native integrations anyway.

[pranav-js]

@DominikPieper yes I had build. I was serving dev build on one side and storybook on another. I had to explicitly install html-webpack-plugin though cause I am using node 16 and using --lgeacy-deps-peer it doesn't really install that 😃

[DominikPieper]

Mh, I'm on 16.13.1. I'll do some experiments. It was working for me without adding something with legacy peer deps ^^' I'll take a look into it a little but I'm really limited on what I'm able to do here. I just install the packages and create some configs. If there are some incompatibilities with the storybook packages I fear that I don't have many ways to fix it ^^'