Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stencil: Storybook generated config doesn't run

See original GitHub issue

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",

Issue Analytics

State:
Created 2 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

DominikPiepercommented, Jan 5, 2022

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

0reactions

DominikPiepercommented, Jan 5, 2022

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 ^^’

Top Results From Across the Web

Error with Storybook for Ember · Issue #13761 - GitHub

Describe the bug While working on some documentation for the LearnStorybook repo for Ember i'm faced with the following error when starting ...

How to use Storybook with Stencil - Ionic Blog

Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation.

pxtrn/storybook-addon-docs-stencil

Configure stencil to generate docs-json at build time. // stencil.config.ts import { Config } from '@stencil/core'; export const config: Config ...

Run, Build & Deploy Stencil and Storybook From One ...

Stencil. Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run...

Build a Web Component library with Stencil and Storybook

In this little tutorial we learn how to add Web Components created with Stencil to a Storybook setup.... Tagged with stencil, storybook, ...