Failing to fetch stories with Storybook 7.0

[hrypkema-amplify]

Issue

After upgrading to Storybook to v7.0.0-rc.3, when running loki with docker locally on macos, we are currently getting Failed fetching stories error.

Screenshots / Logs

yarn loki test

loki test v0.31.1

 FAIL  chrome.docker
       Fetching stories
       8 requests failed to load; file:///var/loki/sb-common-assets/nunito-sans-regular.woff2, 
       file:///var/loki/sb-common-assets/nunito-sans-italic.woff2, 
       file:///var/loki/sb-common-assets/nunito-sans-bold.woff2, 
       file:///var/loki/sb-common-assets/nunito-sans-bold-italic.woff2, 
       file:///var/loki/sb-preview/runtime.mjs, 
       file:///var/loki/runtime~main.bddd1b2d.iframe.bundle.js, 
       file:///var/loki/4380.801d5d24.iframe.bundle.js, file:///var/loki/main.4b0708d2.iframe.bundle.js

Some visual tests failed to run

It appears static assets in index.html from the Storybook build are now being loaded with a ./ in their path ie.

Storybook v7
<script src="./runtime~main.bddd1b2d.iframe.bundle.js"></script>

Storybook v6
<script src="runtime~main.bddd1b2d.iframe.bundle.js"></script>

Environment

• macOS Ventura v13.2.1
• node v16.15.0
• npm v8.5.5
• loki v0.31.1
• storybook v7.0.0-rc.3

Additional context

Any suggestions/ideas appreciated – thanks! 🙏

[nrakochy]

I am looking upgrading as well on this fine Storybook 7 release day, and wondering if there are any pointers to how this might be fixed?

[Urugash]

I'm going to one up this one.
We've recently switched to Storybook 7.0, now that it got out of prerelease and would love to keep using Loki.

[emlai]

FWIW, we migrated from Loki to Storycap + reg-cli for Storybook 7 support. Storycap seems to also be much faster as a bonus.

[maneetgoyal]

Same issue, a fix would help. 🙏

[HoneyQumo]

yes, same issue. A fix would help!

[daniel-chapdelaine]

I'm in the middle of the upgrade to SB 7 and hitting this roadblock as well

[daniel-chapdelaine]

Looks like this could be something to do with a cors issue on docker/chrome. When I open the docker logs while running loki I see the following:

2023-04-26 11:29:12 [0426/162912.207682:ERROR:bus.cc(398)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
2023-04-26 11:29:12 [0426/162912.208238:ERROR:bus.cc(398)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
2023-04-26 11:29:12 
2023-04-26 11:29:12 DevTools listening on ws://0.0.0.0:59950/devtools/browser/052d0826-98dd-416b-93a0-5293b04eeb3f
2023-04-26 11:29:12 [0426/162912.213352:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
2023-04-26 11:29:12 [0426/162912.216004:ERROR:gpu_init.cc(486)] Passthrough is not supported, GL is disabled, ANGLE is 
2023-04-26 11:29:22 [0426/162922.250867:INFO:CONSOLE(0)] "Access to link prefetch resource at 'file:///var/loki/sb-common-assets/nunito-sans-regular.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.251377:INFO:CONSOLE(0)] "Access to link prefetch resource at 'file:///var/loki/sb-common-assets/nunito-sans-italic.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.251799:INFO:CONSOLE(0)] "Access to link prefetch resource at 'file:///var/loki/sb-common-assets/nunito-sans-bold.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.252173:INFO:CONSOLE(0)] "Access to link prefetch resource at 'file:///var/loki/sb-common-assets/nunito-sans-bold-italic.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.480742:INFO:CONSOLE(0)] "Access to script at 'file:///var/loki/sb-preview/runtime.mjs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.480978:INFO:CONSOLE(0)] "Access to script at 'file:///var/loki/runtime~main.b8614f2c.iframe.bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.481479:INFO:CONSOLE(0)] "Access to script at 'file:///var/loki/4523.7e0f1f85.iframe.bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.483262:INFO:CONSOLE(0)] "Access to script at 'file:///var/loki/main.dc697dd9.iframe.bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)

[TheaMorin]

Other people having trouble with storybook 7 may want to look at #436

[tony-show]

Problems remain when testing in CI with the latest version of Loki 0.31.2 and Storybook v7

Any idea how to fix this? Or maybe there is a workaround for testing in CI with Loki and Storybook 7?

[levibuzolic]

@tony-show You'll need to run your tests directly against a running Storybook server, rather than against a static export. See the test-cra-init.sh changes in #451 for an example

[tony-show]

test-cra-init.sh

I could not find an example with test-cra-init.sh in #451

How can I run the Storybook server in parallel with the tests in CI so that the Storybook server completes the process after the screenshot tests in CI are done?

[tony-show]

I solved the problem with running Loki + Storybook 7 screenshot tests in CI! 🎉

Instructions:

1. Install concurrently npm i concurrently, to run processes in parallel

2. Configure a command to start Storybook server and Loki screenshot tests:
   "test_ui_ci": "concurrently --kill-others \"storybook dev -p 6006\" \"npx loki test\"

The --kill-others parameter will terminate the other processes if one of the processes running concurrently is terminated. Accordingly, when the Loki screenshot test finishes, the Storybook server that was running in parallel finishes afterwards.
After the processes are finished, the commands in CI are executed further.

Example from my package.json:

[HoneyQumo]

@tony-show Cool! And how do you deal with killing the process of the local server, which ends with code 1 (error)?

[tony-show]

@tony-show Cool! And how do you deal with killing the process of the local server, which ends with code 1 (error)?

Yes, that was the next bug in CI with successfully completed screenshot tests 😂

We need to add the -s or --success parameter to command the Storybook server to stop with code 0 instead of 1, when the Loki tests successfully completed with code 0.

Like this: "concurrently -s first -k \"npm run storybook\" \"npm run test:ui\""

-s or -success first - Finishes first process with code 0
-k or --kill-others - Kill other processes if one exits or dies.

And everything works great in CI! 🎉

[jansepke]

Is there really no way to run loki on the build output of a storybook 7 build? running both in parallel in CI only looks like a workaround and not like a solution

[squidjam]

Besides, how did you get Loki installed on a Project with storybook 7 already installed? I'm hitting an issue with peer deps that currently doesn't allow Loki to be installed.
Used yarn, got it working... Let's try this then.

[Mnemon1k]

@tony-show Cool! And how do you deal with killing the process of the local server, which ends with code 1 (error)?

Yes, that was the next bug in CI with successfully completed screenshot tests 😂

We need to add the -s or --success parameter to command the Storybook server to stop with code 0 instead of 1, when the Loki tests successfully completed with code 0.

Like this: "concurrently -s first -k \"npm run storybook\" \"npm run test:ui\""

-s or -success first - Finishes first process with code 0
-k or --kill-others - Kill other processes if one exits or dies.

And everything works great in CI! 🎉

May I see your GitHub project, please?

[Mnemon1k]

I have trouble, locally all tests pass, but from GitHub actions - 80% of tests fail

[kllpff]

Every screenshot is different with this...

@tony-show Cool! And how do you deal with killing the process of the local server, which ends with code 1 (error)?

Yes, that was the next bug in CI with successfully completed screenshot tests 😂

We need to add the -s or --success parameter to command the Storybook server to stop with code 0 instead of 1, when the Loki tests successfully completed with code 0.

Like this: "concurrently -s first -k \"npm run storybook\" \"npm run test:ui\""

-s or -success first - Finishes first process with code 0
-k or --kill-others - Kill other processes if one exits or dies.

And everything works great in CI! 🎉

[tony-show]

I have trouble, locally all tests pass, but from GitHub actions - 80% of tests fail

Yes, I have been this trouble too. For fix write a decorator for Storybook so that Loki uses a delay before taking a screenshot.

Like this:

And use it in preview.js of Storybook config files

[kllpff]

Yes, I have been this trouble too. For fix write a decorator for Storybook so that Loki uses a delay before taking a screenshot.

Good, one more solution:
(npm i concurrently, npm i deelay)
"test:ui:ci": "concurrently --kill-others --raw --success first \"npm run storybook\" \"npm run test:ui\" \"deelay\"",

[oblador]

Fixed in 0.32.0

[wantedrbk]

storybook 7.1 , loki 0.32.0 on CI it always fires this Error ( , are u sure it fixed ?

[Vadim2308]

I've seen many times on the forums that loki doesn't work with storybook > 7 in production build and in CI. None of the solutions helped. Any opinions on how to fix this ?