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

[tobiasdiez]

Thanks for looking into this. If it's indeed a problem with the runtime bundler of vue, then this should be fixed as part of #740 (which sadly is stuck in another issue).

[bojanrajh]

As a workaround, because we are not using cdn or changing the base URL, pnpm patch nuxt did the trick, for now:

diff --git a/dist/index.mjs b/dist/index.mjs
index 9fe137cf72916a0ceb3edbae12c9deacd960faed..625bb157338fbf10083760166600e518d81065c5 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -5119,7 +5119,8 @@ const publicPathTemplate = {
       "export const buildAssetsDir = () => appConfig.buildAssetsDir",
       "export const buildAssetsURL = (...path) => joinRelativeURL(publicAssetsURL(), buildAssetsDir(), ...path)",
       "export const publicAssetsURL = (...path) => {",
-      "  const publicBase = appConfig.cdnURL || appConfig.baseURL",
+      "  const publicBase = ''",
       "  return path.length ? joinRelativeURL(publicBase, ...path) : publicBase",
       "}",
       // On server these are registered directly in packages/nuxt/src/core/runtime/nitro/renderer.ts