loki icon indicating copy to clipboard operation
loki copied to clipboard

Failed fetching stories on Storybook 8 with storybook-static

Open PFight opened this issue 10 months ago • 7 comments

Latest Loki 0.35.1 don't work with latest Storybook 8.5.7 in CI mode (--reactUri file:./storybook-static)

Repro

https://github.com/PFight/loki-storybook8-fail

Steps to reproduce

  1. Switch to branch "latest"
  2. npm install --force
  3. npm run build-storybook
  4. npm run loki

Error

$ npm run loki

> [email protected] loki
> loki --diffingEngine looks-same --chromeTolerance 3 --chromeRetries 5 --chromeConcurrency 2  --reactUri file:./storybook-static  --chromeFlags="--disable-web-security --hide-scrollbars --headless"

loki test v0.35.0
(node:25052) NOTE: The AWS SDK for JavaScript (v2) is in maintenance mode.
 SDK releases are limited to address critical bug fixes and security issues only.

Please migrate your code to use AWS SDK for JavaScript (v3).
For more information, check the blog post at https://a.co/cUPnyil
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  chrome.app
       Fetching stories
       Failed fetching stories because the server is down
       Try starting it with "yarn storybook" or pass the --port or --host
       arguments if it's not running at http://192.168.251.14:10214
Some visual tests failed to run

Additional info

Loki works with running storybook (not static). Problem only with static-storybook.

Loki 0.31.1 works with Storybook 7.6.17 Loki 0.31.1 does not works with Storybook 8.5.7 Loki 0.35.1 does not works with Storybook 7.6.17 Loki 0.35.1 does not works with Storybook 8.5.7

Tested with Node v22.14.0.

(in different versions combination error changes)

Looks like https://github.com/oblador/loki/issues/503 does not fixed for storybook-static.

PFight avatar Feb 19 '25 06:02 PFight

@PFight if you serve your static-storybook with http-server for example like this: pnpm http-server ./storybook-static --port 6006 is it being served? and then when you try to run for example pnpm loki test does it work for you?

MarceloBarrera avatar Feb 27 '25 20:02 MarceloBarrera

@MarceloBarrera

npx http-server ./storybook-static --port 6006                               
Starting up http-server, serving ./storybook-static

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:6006
  ...
Hit CTRL-C to stop the server

I had checked that it was indeed there and accessible. Then ran loki:

npm run loki                                                                          

> loki

loki test v0.35.0
(node:71293) NOTE: The AWS SDK for JavaScript (v2) is in maintenance mode.
 SDK releases are limited to address critical bug fixes and security issues only.

Please migrate your code to use AWS SDK for JavaScript (v3).
For more information, check the blog post at https://a.co/cUPnyil
(Use `node --trace-warnings ...` to show where the warning was created)

Connected!
 FAIL  chrome.docker
       Fetching stories
       SB_PREVIEW_API_0011 (StoryStoreAccessedBeforeInitializationError): Cannot access the Story Store 
       until the index is ready.
Some visual tests failed to run

evilPaprika avatar Mar 12 '25 08:03 evilPaprika

@PFight if you serve your static-storybook with http-server for example like this: pnpm http-server ./storybook-static --port 6006 is it being served? and then when you try to run for example pnpm loki test does it work for you?

Yes, it work. I wrote this in the topic:

Loki works with running storybook (not static). Problem only with static-storybook.

PFight avatar Mar 12 '25 08:03 PFight

Update: workaround with older package versions does not work with Chrome 109.0.5414.120. With Chrome 134.0.6998.89 works.

PFight avatar Mar 21 '25 08:03 PFight

In loki.config.js if I use chrome.docker and run yarn loki --requireReference --reactUri file:./storybook-static It will work fine but if I use chrome.app it logs this error

loki test v0.35.0
(node:348736) NOTE: The AWS SDK for JavaScript (v2) is in maintenance mode.
 SDK releases are limited to address critical bug fixes and security issues only.

Please migrate your code to use AWS SDK for JavaScript (v3).
For more information, check the blog post at https://a.co/cUPnyil
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  chrome.app
       Fetching stories
       Failed fetching stories because the server is down
       Try starting it with "yarn storybook" or pass the --port or --host arguments if 
       it's not running at http://192.168.1.39:17160
Some visual tests failed to run

Anxhul10 avatar Jun 27 '25 17:06 Anxhul10

Any update on this? Could you make it work?

peruzzof avatar Jul 01 '25 21:07 peruzzof

you can see a patch in this https://github.com/Anxhul10/loki/tree/fix/sb9-express which is taken from this issue https://github.com/oblador/loki/issues/401 it works for me

Anxhul10 avatar Jul 01 '25 21:07 Anxhul10