Closed doutatsu closed 10 months ago
It almost feels like setup
doesn't run before the story loads or something like that. Here is an example of a story that fails:
import { useUserStore } from '@/store/user';
import PricingView from '@/views/Pricing.vue';
export default {
title: 'Views/Pricing',
};
const Template = (args) => ({
components: { PricingView },
setup() { return { args }; },
template: '<pricing-view v-bind="args" />',
});
export const Pricing = Template.bind({});
export const DarkTheme = Template.bind({});
DarkTheme.parameters = { theme: 'dark' };
Pricing.loaders = [
async () => {
const userStore = useUserStore();
userStore.currentUser = {};
},
];
DarkTheme.parameters = { theme: 'dark' };
DarkTheme.loaders = [
async () => {
const userStore = useUserStore();
userStore.currentUser = {};
},
];
Any thoughts on this @chakAs3?
Or @Integrayshaun as you closed the other issue 😫
Hi, thanks for reporting this. do you have a reproduction repo you can share? If not, can you create one (see how to create a repro). We prioritize bug reports that have reproduction. Thank you! 🙏
Hi @doutatsu i have just created a repo with same package.json provided , but using only pinia to narrow the issue,
https://stackblitz.com/~/github.com/chakAs3/my-vue-app/blob/master/.storybook/preview.js
i have include your story named Pinia, please use this repo as base for your repro, i'm not able to reproduce the issue
Thanks @chakAs3 - I was actually just about started to working on reproduction myself. Funny enough, your repro doesn't render the story even on load 😬
@chakAs3 Yup, your reproduction actually has the exact problem I've described. Here is the simple steps to get the error in your repro:
Here's a video as well:
https://github.com/storybookjs/storybook/assets/4270980/4de72a26-ec2f-4553-8211-160723a6f6ee
@vanessayuenn I've updated description with the reproduction link made by @chakAs3 as well as steps to reproduce this issue
@doutatsu i tried again on my local, i pulled the same repo, and it did work, Stackblitz could have some issue
https://github.com/storybookjs/storybook/assets/711292/75c0e168-d178-4c5b-a44b-a107cd6c6f21
I'm sorry if i'm not able to check your issue in time, i'm very busy this week for my private business at GITEX Technology Week in Dubai, so bear with me. i ll put more time next week
No worries @chakAs3, I've been trying to upgrade for months, so at this point, I can wait as long as needed 😂
Also, just in case - did you follow the reproduction steps I described? As your video doesn't seem to follow the steps, there is no error present, which is expected.
You need to specifically go to the Pricing story first and then reload the page to force the error. After that, if you switch to other stories and back, it would fix itself. But crucially, the error appears when you reload the page (or in the case of Chromatic, on load)
You need to specifically go to the Pricing story first and then reload the page to force the error. After that, if you switch to other stories and back, it would fix itself. But crucially, the error appears when you reload the page
oh Sorry i did not read the repro steps, i thought first load ok i will check it tonight 👍
@doutatsu I've just confirmed that using the loader should be independent of the rendering framework, be it Vue or React. The loader can't utilize a Vue plugin since it's currently unavailable. Loaders are primarily for fetching data via HTTP requests. Pinia, on the other hand, is a state manager that can be used as usual inside the setup function.
If I'm not mistaken, the reason for considering Pinia within the loader is because you're handling data loading within the store.
The good news is that you don't need to worry about this when working with Vue. The issue Vue developers face in Storybook is that Storybook was originally built with a React mindset, which differs from Vue, Svelte, or Solid. To address this, I've created a separate group where I can leverage the Vue mindset and provide more documentation, examples, and content.
Unfortunately, even though I'd like to, I can't clone myself. In the past three days, I've had only six hours of sleep. This is because GITEX week in Dubai is a huge event that occurs once a year.
Ah, that's super helpful @chakAs3 - I can confirm moving store definition into setup step fixes the issue, but I am now unsure on how to properly manage store state between stories. I used loader
to setup data in the store, but I don't see a way to do it when store is set in setup.
No rush on replying, just going to leave this comment for you when you got free time again and I'll continue re-reading the docs to figure out if there is a way
Here an example of a story I am trying to set data for:
import { computed } from 'vue';
import { factories } from '@/../tests/factories';
import { useUserStore } from '@/store/user';
import BaseNavigation from '@/components/base_components/BaseNavigation.vue';
export default {
title: 'Components/Base Components/Navigation',
};
const Template = (args) => ({
components: { BaseNavigation },
setup() {
const store = useUserStore();
return { args, store };
},
template: `
<div class="h-screen flex flex-col">
<header class='flex-1 bg-gray-50 dark_bg-slate-700'>
<base-navigation v-bind="args" />
</header>
</div>
`,
});
export const SignedIn = Template.bind({});
SignedIn.loaders = [
async (comp) => {
// const userStore = useUserStore();
// userStore.currentUser = factories.user.build();
// userStore.darkMode = false;
comp.store.currentUser = factories.user.build();
comp.store.darkMode = false;
},
];
export const NotSignedIn = Template.bind({});
NotSignedIn.loaders = [
async (comp) => {
// const userStore = useUserStore();
// userStore.currentUser = {};
// userStore.darkMode = false;
comp.args.store.currentUser = {};
comp.args.store.darkMode = false;
},
];
export const DarkTheme = Template.bind({});
DarkTheme.parameters = { theme: 'dark' };
DarkTheme.loaders = [
async (comp) => {
// const userStore = useUserStore();
// userStore.currentUser = {};
// userStore.darkMode = true;
comp.args.store.currentUser = {};
comp.args.store.darkMode = false;
},
];
I'm glad to be helpful, actually i wanted to suggest CSF3 format which comes with v7 and has more features and future 😆 , check the same repo i have push some change, may help you to switch. Good luck
I forgot to come back and close this myself - I have fixed it by moving everything into setup
blocks as you described @chakAs3 - it's not as DRY as it was before, but I managed to upgrade, so I am happy 👍🏻 Thanks for the help
I forgot to come back and close this myself - I have fixed it by moving everything into
setup
blocks as you described @chakAs3 - it's not as DRY as it was before, but I managed to upgrade, so I am happy 👍🏻 Thanks for the help
Welcome anytime @doutatsu feel free to get in touch if you face any issue.
I have fixed it by moving everything into setup blocks as you described
@doutatsu do you have an example of this? I'm facing the same issue right now.
@stephiescastle Here's a simple story example. You can then setup your store data any way you want as well in that setup
block:
import { useUserStore } from '@/store/user';
import { factories } from '@/../tests/factories';
import PricingView from '@/views/Pricing.vue';
export default {
title: 'Views/Pricing',
};
const Default = {
render: (args) => ({
components: { PricingView },
setup() {
const store = useUserStore();
store.currentUser = {};
return { args };
},
template: '<pricing-view v-bind="args" />',
}),
};
export const Pricing = { ...Default };
export const Subscribed = {
render: (args) => ({
components: { PricingView },
setup() {
const store = useUserStore();
store.currentUser = factories.user.withPremium().build();
return { args };
},
template: '<pricing-view v-bind="args" />',
}),
};
export const DarkTheme = { ...Default, parameters: { theme: 'dark' } };
Describe the bug
When I go directly to a story that uses a pinia store, it fails with the following error:
https://github.com/storybookjs/storybook/assets/4270980/4580bb7e-db36-44fe-8480-bf016d4a6db5
Interestingly if I first visit a story without a store and then navigate to a story with one, the error does not occur
To Reproduce
Reproduction link
System
Additional context
I've had this error since originally trying to upgrade to 7.0 and it persisted all the way till 7.4.5 and I am still unable to find why this happens.
I run the latest
Vite
with Vue 3 and vanilla JS, not TS in my setup.Here is my
package.json
:Here is my complete
preview.js
where I specify pinia and everything else: