[🐞] server$ doesn't work in Storybook integration

[saeedhbi]

Which component is affected?

Qwik City (routing)

Describe the bug

I'm working on a mono repo project which is using Qwik. The problem I have is when I'm integrating with Storybook, the server$ functions don't work and the returned data is undefined. This is not happening on tests.

I have tested with both manual and https://github.com/literalpie/storybook-framework-qwik integrations, and both are the same.

FYI, the main app is simple and just uses a component from a library component which is added to vendorRoots of qwikVite plugin option. (I'm pretty sure there is no problem regarding configuration). JSX handling is handling completely but when I'm adding the target logic into the server$, it's not working, but without it, there is no problem.

My question is, in what situation, server$ can not be handled and is undefined? And, since the storybook is running in dev environment, how can I see server logs to determine what is processed?

Reproduction

//

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.15 elementary OS 6.1 Jólnir
    CPU: (4) x64 Intel(R) Core(TM) i7-4510U CPU @ 2.00GHz
    Memory: 3.11 GB / 15.52 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 20.1.0 - ~/.nvm/versions/node/v20.1.0/bin/node
    npm: 9.6.4 - ~/.nvm/versions/node/v20.1.0/bin/npm
  Browsers:
    Brave Browser: 100.1.37.113
    Chrome: 114.0.5735.198
  npmPackages:
    vite: 4.3.5 => 4.3.5

Additional Information

Unfortunately, I couldn't create a production URL for this.

[saeedhbi]

@literalpie I'm not sure if this is related to the storybook or not, But I mentioned you since you have more details.

[literalpie]

Oh yes, this is probably more of an issue for the storybook-framework-Qwik package (or storybook itself) than Qwik core. I don't think I ever tested server functions, and all the storybook stuff is browser-based so I don't know what we can do about this without deeper changes to storybook 😬

[saeedhbi]

@manucorporat Since this issue blocked me now, regarding the situation of returning data, do you have any suggestion?

[ahnpnl]

Another way is we can change the way of using Storybook.

In my team, we made a decision that Storybook should be only for reusable components without touching deep framework apis. For example, routing apis should be excluded. Our reusable components reflect the design system and design system doesn’t know about framework.

By putting a separation like that, it will make Storybook lighter to build, serve and also we have a separation between design system vs app domain contexts.

I hope this experience helps you something :) Bonus: I also included a tip how to improve Storybook build time https://discord.com/channels/842438759945601056/1127905633849585704

[saeedhbi]

@ahnpnl It makes sense. But in my case, some of the information is handled only by the node server which can be polyfilled but I don't want to do it. Since this problem is only happening in Storybook integration, probably there are some configurations that are ignoring the default dev of Qwik. I'm trying to find out, but, unfortunately, it's not easy in Storybook workflow.

[ahnpnl]

Can we extract the logic of using server$ to be out of the components you use in storybook and let that logic to be coupled to app domain awareness?

[saeedhbi]

@ahnpnl It is acceptable but at this point, the consistency of workflow is not the same as production. Component and the app domain context are not related together and the component is using our general domain logics. But since the logic is only available in server, there are two options. Transfering server logic to out of component and pass through props, or using mock. Btw, in both ways, since we are using Storybook for both documentation and previews, it has to be implemented completely same as production.

The problem here is not about separation of concern. It's about the process of server$ which is working without any problem in pure qwik dev, and also tests.

[gioboa]

I would like to address this issue. can you add the steps to reproduce the error pls?

[github-actions]

Hello @saeedhbi. Please provide the missing information requested above.
Issues marked with STATUS-2: missing info will be automatically closed if they have no activity within 14 days.
Thanks 🙏