Cannot read properties of undefined (reading 'cdnURL')

[AlexanderBredun]

I used this Nuxt Storybook starter, but when I try to add any image from the public directory, I get the following error:

When I checked the console, it pointed me to this part of the code and showed that there is a problem with useRuntimeConfig:

Node 18.18.2, npm 9.8.1, windows 10

[guim4dev]

@AlexanderBredun did you manage to find a workaround?

[AlexanderBredun]

@guim4dev no unfortunately

[obulat]

To replicate, build the showcase app that has /pages in it:

pnpm dev:prepare & pnpm example:showcase:storybook:build

Go to the build folder (storybook/examples/showcase/storybook-static) and run an http server in it:
npx http-server

Check the logs in the console.

[tobiasdiez]

Thanks @obulat for the reproduction. I get the error there now as well. This only occurs in the static build, and not when looking in console for the dev build ( example:showcase:dev > Storybook), right?

That makes debugging this a bit harder...

[obulat]

Thanks @obulat for the reproduction. I get the error there now as well. This only occurs in the static build, and not when looking in console for the dev build ( example:showcase:dev > Storybook), right?

That makes debugging this a bit harder...

I think that this is related to #761, and the errors there can be masking these errors. router is definitely part of the problem here.

[doppelmutzi]

I have a similar problems. Occurs with the autogenerated Docs view when I have multiple exports in a stories file.

[guim4dev]

adding some extra info here

@doppelmutzi I had the same problem. It only occurs in autogenerated docs with >1 stories. Single Story autogenerated docs work fine, its probably something related to routing as pointed out by @obulat

I disabled autodocs for now as multi stories are important for our use case and it works fine locally.

Sadly now im getting blocked by chromatic, as the built version of storybook also throws the cdnURL error :/

[d-low]

Could this be a race condition? I set a breakpoint on line 2 in paths.mjs and then stepped into useRuntimeConfig():

// /.nuxt/nitro.client.mjs
export const useRuntimeConfig = () => 
window?.__NUXT__?.config || {}

In useRuntimeConfig() window.__NUXT__ was undefined.

However, when I later check whether this global variable is defined in the console I can see that it is:

[enkot]

@tobiasdiez Thank you for your work on this module 💚

It would be great to prioritise this issue. In my case I can't upgrade to Nuxt 3.13.x because of this error.

I will also try to investigate.

[Limonische]

Encountered this error with latest versions of nuxt and storybook.
This helped resolve the issue (only for stories themselves, not docs):

vite: {
    resolve: {
      alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
      },
    },
}

Come to think of it, this is probably related to other issue, but still might be useful to someone