Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Could not resolve "virtual:nuxt-runtime-config" #718

Closed
Yakov-Chernogor opened this issue Jul 14, 2024 · 53 comments · Fixed by #726
Closed

Could not resolve "virtual:nuxt-runtime-config" #718

Yakov-Chernogor opened this issue Jul 14, 2024 · 53 comments · Fixed by #726
Labels
status: needs info/work Further information or work required (usually from the creator of the issue or PR) type: bug Something isn't working

Comments

@Yakov-Chernogor
Copy link

I'm getting this error on a clean nuxt project + storybook while running storybook in dev mode (npm run storybook)
Reproduce on stackblitz https://stackblitz.com/edit/nuxt-storybook-error?file=package.json

✘ [ERROR] Could not resolve "virtual:nuxt-runtime-config"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30:
      5 │ import { runtimeConfig } from 'virtual:nuxt-runtime-config';
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "virtual:nuxt-runtime-config" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/css"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7:
      6 │ import '#build/css';
        ╵        ~~~~~~~~~~~~

  You can mark the path "#build/css" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/plugins"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20:
      7 │ import plugins from '#build/plugins';
        ╵                     ~~~~~~~~~~~~~~~~

  You can mark the path "#build/plugins" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.


 ERROR  error while updating dependencies:                                                               9:10:45 PM
Error: Build failed with 3 errors:
node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30: ERROR: Could not resolve "virtual:nuxt-runtime-config"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7: ERROR: Could not resolve "#build/css"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20: ERROR: Could not resolve "#build/plugins"
    at failureErrorWithLog (/home/yakov/GitHub/KonTxT/KonTxT/node_modules/esbuild/lib/main.js:1472:15)
    at /home/yakov/GitHub/KonTxT/KonTxT/node_modules/esbuild/lib/main.js:945:25
    at /home/yakov/GitHub/KonTxT/KonTxT/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    ```
@tobiasdiez
Copy link
Collaborator

Thanks for the nice report. I cannot reproduce the problem in the main branch (with the example/starter). So hopefully this is fixed already.

@obulat You reported the same issue with the main branch at some point, right? Can you still reproduce it?

@tobiasdiez tobiasdiez added type: bug Something isn't working status: needs info/work Further information or work required (usually from the creator of the issue or PR) labels Jul 15, 2024
@tri-star
Copy link

tri-star commented Jul 15, 2024

@tobiasdiez
I have encountered the same issue as described in this Issue (I am using v8.1.5 and pnpm). The repository where I confirmed the reproduction with relatively small steps is as follows:
https://github.com/tri-star/storybook8-with-nuxtjs

After running npx storybook-nuxt init, I manually updated the versions of Storybook and other packages to the latest ones.
I apologize if there were any mistakes in this process.

I apologize, but I have not checked this issue on the main branch. I will check it on the main branch.

@obulat
Copy link
Contributor

obulat commented Jul 15, 2024

Yes, @tobiasdiez, I got the same errors again.

Since the latest changes weren't released yet, and I don't know how to install monorepo packages from the github main branch, I used pnpm pack to create a tar files for both packages and install them to Openverse Nuxt 3 branch locally. I got exactly the same errors as described in the first message of this issue in the console. The story names were listed in the sidebar, but the stories do not render.

The browser console shows the following error:

BW1NhrJ4.js:6 [nuxt] error caught during app initialization 
TypeError: Cannot read properties of undefined (reading 'cdnURL')
    at b (Ck1jFS18.js:1:4381)
    at et (Ck1jFS18.js:1:4345)
    at xv (BW1NhrJ4.js:2:19913)
    at Ws (BW1NhrJ4.js:2:20105)
    at uc (BW1NhrJ4.js:2:20140)
    at BW1NhrJ4.js:2:60933
    at n (BOf5JozU.js:1:6607)
    at Object.runWithContext (UqsEW9He.js:13:19498)
    at w (BOf5JozU.js:1:6645)
    at BOf5JozU.js:1:4665
    at Ys.run (UqsEW9He.js:9:267)
    at Object.runWithContext (BOf5JozU.js:1:4657)
    at BW1NhrJ4.js:2:60914

When navigating into the source files, it seems that the culprit is the nitro.client.mjs file with the following line:

https://github.com/nuxt/nuxt/blob/48a8b18083ecfc5b9514d6683a2958e7a1a41e13/packages/nuxt/src/core/templates.ts#L291

If window does not have a __NUXT__ object here, then useRuntimeConfig returns an empty object {}. And then paths.mjs errors out when trying to access useRuntimeConfig().app:

https://github.com/nuxt/nuxt/blob/48a8b18083ecfc5b9514d6683a2958e7a1a41e13/packages/nuxt/src/core/templates.ts#L367-L372

I think the paths are not being set up correctly, and this makes it so that the external files that are supposed to be found in the built bundle are not found (virtual:nuxt-runtime-config, #build/css and #build/plugins).

@Blecus2k
Copy link

Blecus2k commented Jul 16, 2024

Can confirm, getting the same Errors..
Used the example/starter config and files...

 WARN  Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files                                                                                                                            08:01:02


 WARN  Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files                                                                                                                                08:01:02

✘ [ERROR] Could not resolve "virtual:nuxt-runtime-config"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30:
      5 │ import { runtimeConfig } from 'virtual:nuxt-runtime-config';
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "virtual:nuxt-runtime-config" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/css"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7:
      6 │ import '#build/css';
        ╵        ~~~~~~~~~~~~

  You can mark the path "#build/css" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/plugins"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20:
      7 │ import plugins from '#build/plugins';
        ╵                     ~~~~~~~~~~~~~~~~

  You can mark the path "#build/plugins" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.


 ERROR  error while updating dependencies:                                                                                                                                                                                         08:01:03
Error: Build failed with 3 errors:
node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30: ERROR: Could not resolve "virtual:nuxt-runtime-config"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7: ERROR: Could not resolve "#build/css"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20: ERROR: Could not resolve "#build/plugins"

@agantelin
Copy link

I also get the same errors on a fresh Nuxt installation.

@yonglory-ms
Copy link

I'm also getting the same errors during the storybook setup.

@teonji
Copy link

teonji commented Jul 17, 2024

I have the same problem. Is there any version or trick to avoid it for the time being so that I can start writing documentation?

@tian-zhihui
Copy link

After added the following code into .storybook/preview.ts, I can temporarily slove the problem in my project.
Hope my suggestions can help you

window.__NUXT__ = {
  serverRendered: false,
  config: {
    public: {},
    app: { baseURL: '/' },
  },
  data: {},
  state: {},
};

@thelfensdrfer
Copy link

After added the following code into .storybook/preview.ts, I can temporarily slove the problem in my project. Hope my suggestions can help you

@tian-zhihui Sadly this does not work for me. I am using the default settings and the latest version 8.1.5.

@teonji
Copy link

teonji commented Jul 17, 2024

After added the following code into .storybook/preview.ts, I can temporarily slove the problem in my project. Hope my suggestions can help you

@tian-zhihui Sadly this does not work for me. I am using the default settings and the latest version 8.1.5.

Unfortunately, it doesn't work for me either.

@tian-zhihui
Copy link

@thelfensdrfer @teonji
Sorry I didn't explain the background clearly.
I checked out the latest main branch, ran pnpm build and installed package "@nuxtjs/storybook" and "@storybook-vue/nuxt" locally.
Then I encountered the same problem like #718 (comment).
I solved the Cannot read properties of undefined (reading 'cdnURL') problem using the above code.

@teonji
Copy link

teonji commented Jul 18, 2024

@thelfensdrfer @teonji Sorry I didn't explain the background clearly. I checked out the latest main branch, ran pnpm build and installed package "@nuxtjs/storybook" and "@storybook-vue/nuxt" locally. Then I encountered the same problem like #718 (comment). I solved the Cannot read properties of undefined (reading 'cdnURL') problem using the above code.

OK thanks for the explanation :) I get the error in the issue name and don't know how i can do it.
Are the two things related? is this not reproducible?

@melvinprindustry
Copy link

melvinprindustry commented Jul 18, 2024

Running npx nuxi@latest module add storybook and afterwards yarn dev my startup time increased dramatically. Nuxt would start building itself and a big fat warning:

   A new version (8.2.4) is available!                               │
│                                                                     │
│   Upgrade now: npx storybook@latest upgrade

Would appear. So I ran npx storybook@latest upgrade. Startup time is good again, no weird building tricks. But now I get the exact same errors as OP:

✘ [ERROR] Could not resolve "virtual:nuxt-runtime-config"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30:
      5 │ import { runtimeConfig } from 'virtual:nuxt-runtime-config';
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "virtual:nuxt-runtime-config" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/css"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7:
      6 │ import '#build/css';
        ╵        ~~~~~~~~~~~~

  You can mark the path "#build/css" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/plugins"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20:
      7 │ import plugins from '#build/plugins';
        ╵                     ~~~~~~~~~~~~~~~~

  You can mark the path "#build/plugins" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.


 ERROR  error while updating dependencies:                                                                                                                                                         09:54:06
Error: Build failed with 3 errors:
node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30: ERROR: Could not resolve "virtual:nuxt-runtime-config"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7: ERROR: Could not resolve "#build/css"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20: ERROR: Could not resolve "#build/plugins"
    at failureErrorWithLog (/Users/melvinidema/development/portal-nuxt-3/portal/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/melvinidema/development/portal-nuxt-3/portal/node_modules/esbuild/lib/main.js:945:25
    at /Users/melvinidema/development/portal-nuxt-3/portal/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    ```

The upgrade command upgraded the following packages:
  • @nuxtjs/storybook: 7.0.2 => 8.1.5
  • @storybook-vue/nuxt: 0.2.6 => 8.1.5

@tobiasdiez
Copy link
Collaborator

Is this specific to npm (and yarn), or does anyone experience it with pnpm?

@melvinprindustry
Copy link

Is this specific to npm (and yarn), or does anyone experience it with pnpm?

Good question, we're using Yarn 4.1.1. I've tried getting the examples to work which require pnpm but with no luck so far.

@melvinprindustry
Copy link

melvinprindustry commented Jul 18, 2024

Steps to reproduce:

Setup:

  • MacOS Sonoma 14.3.1
  • M1 Pro
  • pnpm 9.5.0

Clone the git repository:
git clone git@github.com:storybook-vue/nuxt-storybook-module-demo.git

CD into the directory and run:
pnpm install

Then, run:
pnpm dev

The errors will appear.

Seems like it's also an issue with pnpm @tobiasdiez
Could be an ARM issue...?

@obulat
Copy link
Contributor

obulat commented Jul 18, 2024

Is this specific to npm (and yarn), or does anyone experience it with pnpm?

I'm using pnpm

@JRew1234
Copy link

Is this specific to npm (and yarn), or does anyone experience it with pnpm?

I do

@tobiasdiez
Copy link
Collaborator

Thanks everyone for your helpful responses!

I have a solution at #726. Still needs a bit of cleanup but it's working for me. Could you please try it out using the pnpm pack method described in #718 (comment)
I pretty busy the next few days but if this approach is working, I may find the time early next week to finish the PR.

@cheindl
Copy link

cheindl commented Jul 22, 2024

This fix seems to be a step forward as i don´t get the original errors from above ([ERROR] Could not resolve "virtual:nuxt-runtime-config").

But even in combination with the changes from #723 i get the following errors from the Preview iframe when opening a story:

[nuxt] error caught during app initialization
TypeError: Cannot read properties of undefined (reading 'cdnURL')
at publicAssetsURL (paths.mjs:8:32)
    at buildAssetsURL (paths.mjs:6:60)
    at fetchManifest (manifest.js?v=447340d6:12:21)
    at getAppManifest (manifest.js?v=447340d6:26:22)
    at getRouteRules (manifest.js?v=447340d6:35:9)
    at router.js?v=447340d6:155:65
    at fn (nuxt.js?v=447340d6:214:44)
    at Object.runWithContext (runtime-core.esm-bundler.js?v=447340d6:3944:18)
    at callWithNuxt (nuxt.js?v=447340d6:220:24)
    at nuxt.js?v=447340d6:37:41

Even if there is a window.NUXT object present within the preview iframe, the configuration seems to be read too early within paths.mjs (const appConfig = useRuntimeConfig().app is outside the publicAssetsURL function).

@JRew1234
Copy link

@tobiasdiez works fine for me, I have some problems with story not rendering inside vuetify slot but I guess it's not related

@obulat
Copy link
Contributor

obulat commented Jul 23, 2024

With these changes, I get the following errors:

[Vue Router warn]: Record with path "/iframe.html" is either missing a "component(s)" or "children" property.

comes from applyPlugins in preview.mjs

[nuxt] error caught during app initialization TypeError: Cannot read properties of undefined (reading 'cdnURL')
    at publicAssetsURL (paths.mjs:8:32)
    at buildAssetsURL (paths.mjs:6:60)
    at fetchManifest (manifest.js:12:21)
    at getAppManifest (manifest.js:26:22)
    at getRouteRules (manifest.js:35:9)
    at router.js:161:42
    at fn (nuxt.js:214:44)
    at Object.runWithContext (runtime-core.esm-bundler.js:3104:18)
    at callWithNuxt (nuxt.js:220:24)
    at nuxt.js:37:41

comes from hookable/index.mjs

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <Anonymous> 
  at <Anonymous> 
  at <App>

_comes from sb_preview/runtime.js

@andresilva-cc
Copy link

I'm having the same problem while using Yarn Classic (v1).

@Nemhis
Copy link

Nemhis commented Jul 29, 2024

Hi, I think I have the same problem when installing storybook 8.2.6

✘ [ERROR] Could not resolve "virtual:nuxt-runtime-config"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30:
      5 │ import { runtimeConfig } from 'virtual:nuxt-runtime-config';
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "virtual:nuxt-runtime-config" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/css"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7:
      6 │ import '#build/css';
        ╵        ~~~~~~~~~~~~

  You can mark the path "#build/css" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/plugins"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20:
      7 │ import plugins from '#build/plugins';
        ╵                     ~~~~~~~~~~~~~~~~

  You can mark the path "#build/plugins" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.


 ERROR  error while updating dependencies:                                                                                                                                                                                                                                                         11:17:31 PM
Error: Build failed with 3 errors:
node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30: ERROR: Could not resolve "virtual:nuxt-runtime-config"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7: ERROR: Could not resolve "#build/css"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20: ERROR: Could not resolve "#build/plugins"
    at failureErrorWithLog (/Users/pavelkurapov/projects/bikenet-front/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/pavelkurapov/projects/bikenet-front/node_modules/esbuild/lib/main.js:945:25
    at /Users/pavelkurapov/projects/bikenet-front/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) (x2)

There is my package.json

{
 "name": "nuxt-app",
 "private": true,
 "type": "module",
 "scripts": {
   "build": "nuxt build",
   "dev": "nuxt dev",
   "generate": "nuxt generate",
   "preview": "nuxt preview",
   "postinstall": "nuxt prepare",
   "lint": "eslint .",
   "lint:fix": "eslint . --fix"
 },
 "dependencies": {
   "@healerlab/vue3-facebook-login": "^0.1.7",
   "@nuxt/eslint": "^0.3.13",
   "@nuxtjs/i18n": "^8.3.1",
   "@nuxtjs/storybook": "^8.1.5",
   "@pinia/nuxt": "^0.5.1",
   "@vee-validate/i18n": "^4.13.1",
   "@vee-validate/nuxt": "^4.13.1",
   "@vee-validate/rules": "^4.13.1",
   "@vueuse/core": "^10.11.0",
   "lodash-es": "^4.17.21",
   "nuxt": "^3.12.1",
   "nuxt-viewport": "^2.1.5",
   "nuxt-vue3-google-signin": "^0.0.11",
   "pinia": "^2.1.7",
   "vue": "^3.4.27",
   "vue-router": "^4.3.3",
   "vue3-recaptcha-v2": "2.0.2"
 },
 "devDependencies": {
   "@nuxtjs/svg-sprite": "1.0.2",
   "@types/lodash-es": "4.17.12",
   "@typescript-eslint/eslint-plugin": "^7.13.1",
   "@typescript-eslint/parser": "^7.13.1",
   "eslint": "^8.57.0",
   "sass": "^1.77.5",
   "sass-loader": "^14.2.1",
   "vite-svg-loader": "5.1.0"
 }
}

Help pls, someone found workaround ?

@Limonische
Copy link

Does anybody know what was the last combination of packages which worked properly? (storybook, addons, @nuxtjs/storybook, @storybook-nuxt/vue, @chromatic-com/storybook) etc.

@Limonische
Copy link

Thanks everyone, will test it out

@Limonische
Copy link

Limonische commented Jul 31, 2024

Can confirm that combination above works (with resolutions). @koya1616 You might wanna update the "working properly" list to exclude ^ for anyone in the future.
Thanks everyone, you've been a huge help ❤️

@mehcode
Copy link
Contributor

mehcode commented Aug 2, 2024

@tobiasdiez I played with your PR for awhile. If I take it as-is and then patch the preset.mjs file to the following snippet - everything seems to work. This is definitely a hack. But I hope showing something that works will help.

import { setup } from '@storybook/vue3';
import { reactive } from "vue";

const appConfig = reactive({ baseURL: "/" });

window.__NUXT__ = {
  serverRendered: false,
  config: {
    public: {},
    app: appConfig,
  },
  data: {},
  state: {},
};

setup(async (vueApp) => {
  const { createNuxtApp, applyPlugins } = await import("nuxt/app");
  const { getContext } = await import("unctx");
  const { $fetch } = await import("ofetch");
  const { runtimeConfig } = await import("virtual:nuxt-runtime-config");

  window.__NUXT__ = {
    serverRendered: false,
    config: {
      public: {},
      app: appConfig,
      ...runtimeConfig,
    },
    data: {},
    state: {},
  };

  const nuxtAppName = `nuxt-app`;
  const nuxtCtx = getContext(nuxtAppName);
  if (nuxtCtx.tryUse()) {
    return;
  }

  if (!globalThis.$fetch) {
    globalThis.$fetch = $fetch.create({
      baseURL: "/"
    });
  }

  const nuxt = createNuxtApp({
    vueApp,
    globalName: nuxtAppName
  });

  await nuxt.hooks.callHook("app:created", vueApp);
  await nuxt.hooks.callHook("app:beforeMount", vueApp);
  nuxtCtx.set(nuxt, true);

  await applyPlugins(nuxt, (await import("#build/plugins")).default);
  await import("#build/css");

  Object.assign(appConfig, window.__NUXT__.config.app);
});

FYI if anyone wants to try this, I used pnpm patch @storybook-vue/nuxt to apply this (and the PR updates by pnpm build-ing them and copying over the changes into a local patch.

@tobiasdiez
Copy link
Collaborator

Thanks everyone for testing!

@cheindl @obulat The cdnURL error seems unrelated, and I'll have a look at it later.

@mehcode why did you needed to apply these patches on top of it? What was not working without them?

tobiasdiez added a commit that referenced this issue Aug 3, 2024
<!---
☝️ PR title should follow conventional commits
(https://conventionalcommits.org)
-->

### 🔗 Linked issue

Fixes #718.

<!-- If it resolves an open issue, please link the issue here. For
example "Resolves #123" -->

### ❓ Type of change

<!-- What types of changes does your code introduce? Put an `x` in all
the boxes that apply. -->

- [ ] 📖 Documentation (updates to the documentation or readme)
- [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
- [ ] 👌 Enhancement (improving an existing functionality)
- [ ] ✨ New feature (a non-breaking change that adds functionality)
- [ ] 🧹 Chore (updates to the build process or auxiliary tools and
libraries)
- [ ] ⚠️ Breaking change (fix or feature that would cause existing
functionality to change)

### 📚 Description


<!-- Describe your changes in detail -->
<!-- Why is this change required? What problem does it solve? -->
@tobiasdiez tobiasdiez reopened this Aug 3, 2024
@tobiasdiez
Copy link
Collaborator

Not sure if this is really fixed... I tried it again in a new project and it seems the error still occurs. Strange...

@mehcode
Copy link
Contributor

mehcode commented Aug 3, 2024

why did you needed to apply these patches on top of it? What was not working without them?

I had the same issues others have reported, the Cannot read properties of undefined (reading 'cdnURL') error.

From my testing/hacking I noticed that window.__NUXT__ was being read before you're setting it and the value of .config.app is being stored.

@mehcode
Copy link
Contributor

mehcode commented Aug 3, 2024

I should also mention a couple other things.

  • I'm not sure if it was these changes you've made to fix this, or Nuxt 3.12 in general, but the viteFinal from @storybook/vue3-vite is not being merged properly. I had to manually add vue: isStorybook ? "vue/dist/vue.esm-bundler.js" : "vue", to alias in my nuxt configuration.

  • Additionally, this only fixes the dev storybook, the static version required me to add the following to my preview file. It's some kind of data race. Without this, I was getting an error "no story set".

// HACK: ever since the update to Nuxt 3.12 and Storybook 8.12, the static
//  build of our storybook fails to select the story on first load
//  this hacks into the internal API of storybook to force a select
//  immediately
setTimeout(() => {
  const query = new URLSearchParams(window.parent.location.search.slice(1));
  const storyId = query.get("path")?.split("/")?.at(-1);

  if (storyId != null) {
    addons.getChannel().emit("setCurrentStory", {
      storyId,
    });
  }
}, 0);

@mehcode
Copy link
Contributor

mehcode commented Aug 3, 2024

So the first issue definitely looks like an issue with this package:

const storybookViteConfig = await getStorybookViteConfig(config, options)
const { viteConfig: nuxtConfig, nuxt } = await loadNuxtViteConfig(
storybookViteConfig.root,
)
const finalViteConfig = mergeViteConfig(config, nuxtConfig, nuxt)
// Write all vite configs to logs
const fs = await import('node:fs')
fs.mkdirSync(join(options.outputDir, 'logs'), { recursive: true })
console.debug(`Writing Vite configs to ${options.outputDir}/logs/...`)
fs.writeFileSync(
join(options.outputDir, 'logs', 'vite-storybook.config.json'),

We're ignoring the configuration entirely here.

@mehcode
Copy link
Contributor

mehcode commented Aug 3, 2024

@mehcode
Copy link
Contributor

mehcode commented Aug 3, 2024

If you'll give me an hour, I'll send a patch to fix part of this. The logic around config merging is broken on main and that's what I'm looking at right now.

@mehcode
Copy link
Contributor

mehcode commented Aug 3, 2024

@tobiasdiez This fixes the first remaining issue I had - #740

I'm still using the hacked preview file locally though

@tobiasdiez
Copy link
Collaborator

This issue has been resolved in the latest nightly release. For installation instructions, please refer to: https://storybook.nuxtjs.org/getting-started/setup#installation. If you experience any further problems, don't hesitate to reopen this or create a new issue.

@Nemhis
Copy link

Nemhis commented Aug 12, 2024

Still can not. Step by step installed by nightly build instructions

Error:

✘ [ERROR] Could not resolve "virtual:nuxt-runtime-config"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30:
      5 │ import { runtimeConfig } from 'virtual:nuxt-runtime-config';
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "virtual:nuxt-runtime-config" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/css"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7:
      6 │ import '#build/css';
        ╵        ~~~~~~~~~~~~

  You can mark the path "#build/css" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/plugins"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20:
      7 │ import plugins from '#build/plugins';
        ╵                     ~~~~~~~~~~~~~~~~

  You can mark the path "#build/plugins" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.


 ERROR  error while updating dependencies:                                                                                                                                                  3:57:11 PM
Error: Build failed with 3 errors:
node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:30: ERROR: Could not resolve "virtual:nuxt-runtime-config"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7: ERROR: Could not resolve "#build/css"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:20: ERROR: Could not resolve "#build/plugins"

Package.json

...
"dependencies": {
    "@healerlab/vue3-facebook-login": "^0.1.7",
    "@nuxt/eslint": "^0.3.13",
    "@nuxtjs/i18n": "^8.3.1",
    "@pinia/nuxt": "^0.5.1",
    "@vee-validate/i18n": "^4.13.1",
    "@vee-validate/nuxt": "^4.13.1",
    "@vee-validate/rules": "^4.13.1",
    "@vkid/sdk": "^2.1.0",
    "@vueuse/core": "^10.11.0",
    "lodash-es": "^4.17.21",
    "nuxt": "^3.12.1",
    "nuxt-viewport": "^2.1.5",
    "nuxt-vue3-google-signin": "^0.0.11",
    "pinia": "^2.1.7",
    "vue": "^3.4.27",
    "vue-router": "^4.3.3",
    "vue3-recaptcha-v2": "2.0.2"
  },
  "devDependencies": {
    "@nuxtjs/storybook": "npm:@nuxtjs/storybook@nightly",
    "@nuxtjs/svg-sprite": "1.0.2",
    "@storybook-vue/nuxt": "0.2.10",
    "@storybook/addon-essentials": "8.2.8",
    "@storybook/addon-interactions": "8.2.8",
    "@storybook/addon-links": "8.2.8",
    "@storybook/blocks": "8.2.8",
    "@storybook/builder-vite": "8.2.8",
    "@storybook/test": "8.2.8",
    "@storybook/vue3": "8.2.8",
    "@storybook/vue3-vite": "8.2.8",
    "@types/lodash-es": "4.17.12",
    "@types/node": "^18.17.5",
    "@typescript-eslint/eslint-plugin": "^7.13.1",
    "@typescript-eslint/parser": "^7.13.1",
    "eslint": "^8.57.0",
    "sass": "^1.77.5",
    "sass-loader": "^14.2.1",
    "storybook": "8.2.8",
    "vite-svg-loader": "5.1.0"
  }
...

@tobiasdiez
Copy link
Collaborator

the dev deps @storybook-vue/nuxt @storybook/builder-vite @storybook/vue3 @storybook/vue3-vite are not needed anymore. can you try after removing them

@Nemhis
Copy link

Nemhis commented Aug 12, 2024

What should i use as framework in .storybook/main.ts ? Now it look like this:

const config = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook-vue/nuxt',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

@tobiasdiez
Copy link
Collaborator

Seams to be correct: https://github.com/nuxt-modules/storybook/tree/main/examples/starter

@Nemhis
Copy link

Nemhis commented Aug 12, 2024

It seems to be working. Thank you so much.

@tobiasdiez
Copy link
Collaborator

tobiasdiez commented Aug 13, 2024

Since this seems to work well, could you please release a new version @chakAs3 ❤️

@AlexanderBredun
Copy link

still have cdnURL error or you think its not related to this problem?
image

@AlexanderBredun
Copy link

AlexanderBredun commented Aug 13, 2024

@tobiasdiez Yeah, even in a minimal reproduction, it gives that error for any image in the public directory. It seems to be related to this part, which I guess you have been changing in this thread.
image

@tobiasdiez
Copy link
Collaborator

Do you have any visible problems from this error, or is it only annoying in the console? Could you please open a new issue, since it's not directly related to this one here.

My first guess is that the setup functions are run in parallel and thus the nuxt config is not yet initialized. (see #642 (comment))

@AlexanderBredun
Copy link

i created new issue #753 and no with this error storie doesnt work at all

@tkjaergaard
Copy link

tkjaergaard commented Aug 15, 2024

After using the nightly build (^8.2.0-28726259.a3fa103) i get this warning in the terminal:

WARN The following packages are incompatible with Storybook 8.2.7 as they depend on different major versions of Storybook packages:
WARN - @nuxtjs/storybook@8.2.0-28726259.a3fa103
WARN  Repo: https://storybook.nuxtjs.org
WARN - @storybook/addon-essentials@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials
WARN - @storybook/addon-links@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/links
WARN - @storybook/types@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/lib/types
WARN 
WARN 
WARN Please consider updating your packages or contacting the maintainers for compatibility details.
WARN For more on Storybook 8 compatibility, see the linked GitHub issue:
WARN https://github.com/storybookjs/storybook/issues/26031

And still getting the error "Failed to fetch dynamically imported module: http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_addon-essentials_outline_preview.js?v=d7058fda"

Using nuxt 3.12.4

Running yarn why storybook:

=> Found "storybook@8.2.9"
info Reasons this module exists
   - "@nuxtjs#storybook" depends on it
   - Hoisted from "@nuxtjs#storybook#storybook"

If i run it using pnpm, i still get the warnings about ther versions mis-match. But the Storybook is working without the "Failed to fetch dynamically imported module [...]" error.

@obulat
Copy link
Contributor

obulat commented Aug 16, 2024

@tobiasdiez , it seems that the paths problems arise when the Nuxt app has /pages. If you run /examples/showcase, you can see that there are errors stating that the route cannot be found. It seems that the routes from pages are overwriting the routes created by the Storybook Nuxt app.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: needs info/work Further information or work required (usually from the creator of the issue or PR) type: bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.