NuxtLink, useRuntimeConfig, useNuxtApp, anything requiring nuxt instance does not work

[daviddomkar]

This module is currently very broken and does not work when some component accesses the nuxt instance. From the logs it seams that the issue is that the nuxt instance is injected later and the components using the nuxt instance do not have access to it on the first preview render. This is problematic when deploying to chromatic or building static storybook while also negatively affecting DX because of the need to click away from the story and back to have NuxtLink rendered for example.

The issue is reproducible in this repository using the playground project. The "App" story under "Pages" has this problem. I also thought that somehow the "NuxtLink" story under "Components" renders a nuxt link and thought it may be a mistake on my side but the reality is that the "NuxtLink" story just renders a button, not a real "NuxtLink" which should be also fixed to not confuse people.

[daviddomkar]

nuxt-modules/storybook#474 and nuxt-modules/storybook#458 might be related

[ITsattva]

@daviddomkar
I also spent a lot of time solving problems related to the use of plugins or Nuxt-specific components. The last thing that really made some improvement was adding a setting in nuxt.config - components: true, that is:
export default defineNuxtConfig({ components: true, // all your other settings });
I hope this helps someone save tons of hours.

[ITsattva]

@daviddomkar I also spent a lot of time solving problems related to the use of plugins or Nuxt-specific components. The last thing that really made some improvement was adding a setting in nuxt.config - components: true, that is: export default defineNuxtConfig({ components: true, // all your other settings }); I hope this helps someone save tons of hours.

Nevermind. It still doesn't work. This setting only provided a chance that everything would work as expected on the first render, but after testing it for a while, there is still no guarantee that your component will render when Nuxt is ready for use.

[chakAs3]

Hi @ITsattva
it would be helpful if you would create a reproduction repo with the steps so i will be looking at it with priority

[ITsattva]

@chakAs3 I appreciate your responsiveness, but unfortunately, even with help, I cannot upgrade to version 8, as not all the add-ons I need have been updated to it at the time of my last compatibility check with the latest version.

@daviddomkar The main (and perhaps all) issues arise because the Nuxt context does not keep up with the rendering of components, so a solution might be to create a global decorator that explicitly checks whether Nuxt is loaded and only renders the component if Nuxt is available.

export const withNuxtReady = (Story, context) => {
const isNuxtReady = ref(false);

const checkNuxtReady = () => {
if (useNuxtApp()) {
isNuxtReady.value = true;
clearInterval(intervalId);
}
};

const intervalId = setInterval(checkNuxtReady, 100);

onUnmounted(() => {
clearInterval(intervalId);
});

return () => isNuxtReady.value ? h(Story(context.args), context) : h('div', 'Loading Nuxt...');
};

IMPORTANT: If the solution does not work, carefully check the console for errors related to your component and try again after resolving them.

[VegasChickiChicki]

@chakAs3 I appreciate your responsiveness, but unfortunately, even with help, I cannot upgrade to version 8, as not all the add-ons I need have been updated to it at the time of my last compatibility check with the latest version.

@daviddomkar The main (and perhaps all) issues arise because the Nuxt context does not keep up with the rendering of components, so a solution might be to create a global decorator that explicitly checks whether Nuxt is loaded and only renders the component if Nuxt is available.

export const withNuxtReady = (Story, context) => {
const isNuxtReady = ref(false);

const checkNuxtReady = () => {
if (useNuxtApp()) {
isNuxtReady.value = true;
clearInterval(intervalId);
}
};

const intervalId = setInterval(checkNuxtReady, 100);

onUnmounted(() => {
clearInterval(intervalId);
});

return () => isNuxtReady.value ? h(Story(context.args), context) : h('div', 'Loading Nuxt...');
};

IMPORTANT: If the solution does not work, carefully check the console for errors related to your component and try again after resolving them.

This is work for me, but nuxt context is incorrect. If i use this decorator, i lose my plugins on nuxt context, this is bad(

But if i use this decorator i can use $config on my components.

[VegasChickiChicki]

@chakAs3 I can reproduce this bug: https://github.com/VegasChickiChicki/nuxt-3-storybook-v2

1. reload page on Nuxt Welcome Story - Error: [nuxt] instance unavailable
2. injected plugin "api" does not exist on nuxt context

node - 20.3.1

[chakAs3]

@chakAs3 I can reproduce this bug: https://github.com/VegasChickiChicki/nuxt-3-storybook-v2

1. reload page on Nuxt Welcome Story - Error: [nuxt] instance unavailable
2. injected plugin "api" does not exist on nuxt context

node - 20.3.1

thanks for the repro i will check it soon

[tobiasdiez]

Another reproduction: nuxt-modules/storybook#482

[jevadebe]

I found the cause for these issues after a thoroughly investigation but didn't find any time to create a PR yet (altough I hacked something and that worked). It's actually a combination of problems.

• 1 of them is that the projectAnnotations are loaded in a Promise.all from the @storybook/vue package so the order where the side effects are running is nondeterministic

• The other one is that the array of plugins is populated too late. We have to add a placeholder function when loading the file and not after the startup of nuxt.

[baixiaoyu2997]

I found the cause for these issues after a thoroughly investigation but didn't find any time to create a PR yet (altough I hacked something and that worked). It's actually a combination of problems.

• 1 of them is that the projectAnnotations are loaded in a Promise.all from the @storybook/vue package so the order where the side effects are running is nondeterministic
• The other one is that the array of plugins is populated too late. We have to add a placeholder function when loading the file and not after the startup of nuxt.

Can you provide a temporary solution🙏, WithNuxtReady doesn't work for me

[VegasChickiChicki]

I found the cause for these issues after a thoroughly investigation but didn't find any time to create a PR yet (altough I hacked something and that worked). It's actually a combination of problems.

• 1 of them is that the projectAnnotations are loaded in a Promise.all from the @storybook/vue package so the order where the side effects are running is nondeterministic
• The other one is that the array of plugins is populated too late. We have to add a placeholder function when loading the file and not after the startup of nuxt.

Can you provide a temporary solution🙏, please

[tobiasdiez]

@jevadebe Thanks for the investigation! In case you find the time for a PR (which is very much appreciated!), could you please make it against nuxt-modules/storybook#618. In this PR, I've added a simple test case for NuxtLink which is currently failing due to this bug.

[soulrpg]

Temporary solution seems to be what is in this comment: nuxt-modules/storybook#458 (comment)

Adding window.__NUXT__ = { config: { app: {} } } in nuxtAppEntry function in preview.

still there are tons of error in console but at least the stories show up. I checked and Nuxt config seems to be correctly loaded for static bundle inside presets viteFinal function. So something must break it during further processing.

[daviddomkar]

@chakAs3 Can this be fixed soon please? Storybook is entirely unusable with Nuxt 3 in the current state which is just making us consider another framework at this point.

[tobiasdiez]

Thanks @jevadebe for your investigation. In nuxt-modules/storybook#619 I was able to fix this more or less, modulo the two follow-up issues nuxt-modules/storybook#662 and nuxt-modules/storybook#661.

I can very much understand the frustration that this issue caused (in fact in prevented myself from using the storybook module in my own project). But please also take into account that both @chakAs3 and me are working on it in our free time. So if anyone would like to use storybook in their own project and encounters an issue, I would kindly ask them to investigate the underlying reason and in the best case provide a PR to fix it.