storybook 7 support?

[raDiesle]

passing http url to storycap, it is rendering screenshots of "No Preview" in my project.

In the doc page of storycap it doesnt say that its compatible with storybook 7, is it ?

[kuhiga]

Storycap should be compatible with storybook 7. I'd recommend trying to run storycap against pre built storybook since since new storybook versions loads http url before stories are finished generating.

$ build-storybook -o dist-storybook
$ storycap --serverCmd "npx http-server dist-storybook -p 9001" http://localhost:9001

[p3k]

At least with Storybook v7.4.0 I get the following error running Storycap with the built Storybook output:

=> Failed to build the preview
Module not found: Error: Can't resolve '@storybook/addons' in './node_modules/storycap/lib-esm/client'
ModuleNotFoundError: Module not found: Error: Can't resolve '@storybook/addons' in './node_modules/storycap/lib-esm/client'
    at ./node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2022:28
    at ./node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:817:13
    at eval (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at ./node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:275:22
    at eval (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at ./node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:448:22
    at ./node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:118:11
    at ./node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:689:25
    at ./node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:893:8
    at ./node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:1013:5
file:///home/tobi/portal/node_modules/zx/build/core.js:146
            let output = new ProcessOutput(code, signal, stdout, stderr, combined, message);
                         ^

Node.js v18.17.1

[p3k]

According to the latest Storybook docs, the path @storybook/addons would need to be replaced as follows:

1. import { makeDecorator } from '@storybook/preview-api';
2. import { addons } from '@storybook/manager-api';

[p3k]

I think this is the commit at the Storybook repo causing the change.

[p3k]

I currently work around this issue by manually installing @storybook/addons.

[raDiesle]

Seems running storycap in non managed and verbose mode doesnt give me details , why every page opens with "no story found". When I change configuration to old v4 store , storycap works in non managed run.

[raDiesle]

Upgrading from storybook 7.1 to 7.4.2 solved the issue that storycap renders "No Preview" because no story was found.

I still suggest that storycap updates the README.md that it supports v7 in non/managed mode.

[davidleger95]

I'm having issues running storycap in GitHub Actions. Stories will sometimes capture the "No preview" screen at random. It's frustrating because it works fine locally.

I think it has to do with the CI workflow having less CPU so it's rendering too slowly and storycap is being too eager to take the screenshot. I tried adding --delay 1000 though and still get the same issue.

I'm using storybook@7.6.17 and I'm using Vite to build (if that matters).

My workflow looks like this:

- name: Build Storybook
  run: yarn exec -- storybook build --output-dir ./storybook-static
- name: Capture screenshots
  run: yarn exec -- storycap --serverCmd "npx http-server ./storybook-static --port 6008" http://127.0.0.1:6008/ --viewport 1024x768 --outDir ./screenshots