Could not resolve "virtual:nuxt-runtime-config" #718
Comments
|
Thanks for the nice report. I cannot reproduce the problem in the main branch (with the @obulat You reported the same issue with the |
tobiasdiez
added
type: bug
|
@tobiasdiez
I apologize, but I have not checked this issue on the main branch. I will check it on the main branch. |
|
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 The browser console shows the following error: When navigating into the source files, it seems that the culprit is the If 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 ( |
|
Can confirm, getting the same Errors.. |
|
I also get the same errors on a fresh Nuxt installation. |
|
I'm also getting the same errors during the storybook setup. |
|
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? |
|
After added the following code into .storybook/preview.ts, I can temporarily slove the problem in my project. |
@tian-zhihui Sadly this does not work for me. I am using the default settings and the latest version |
Unfortunately, it doesn't work for me either. |
|
@thelfensdrfer @teonji |
OK thanks for the explanation :) I get the error in the issue name and don't know how i can do it. |
|
Running Would appear. So I ran
|
|
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. |
Steps to reproduce:Setup:
Clone the git repository: CD into the directory and run: Then, run: The errors will appear. Seems like it's also an issue with |
I'm using pnpm |
I do |
|
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 |
|
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: Even if there is a window.NUXT object present within the preview iframe, the configuration seems to be read too early within paths.mjs ( |
|
@tobiasdiez works fine for me, I have some problems with story not rendering inside vuetify slot but I guess it's not related |
|
With these changes, I get the following errors: comes from comes from _comes from |
|
I'm having the same problem while using Yarn Classic (v1). |
|
Hi, I think I have the same problem when installing storybook 8.2.6 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 ? |
|
Does anybody know what was the last combination of packages which worked properly? (storybook, addons, @nuxtjs/storybook, @storybook-nuxt/vue, @chromatic-com/storybook) etc. |
|
Thanks everyone, will test it out |
|
Can confirm that combination above works (with resolutions). @koya1616 You might wanna update the "working properly" list to exclude ^ for anyone in the future. |
|
@tobiasdiez I played with your PR for awhile. If I take it as-is and then patch the 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 |
<!--- ☝️ 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? -->
|
Not sure if this is really fixed... I tried it again in a new project and it seems the error still occurs. Strange... |
I had the same issues others have reported, the From my testing/hacking I noticed that |
|
I should also mention a couple other things.
|
|
So the first issue definitely looks like an issue with this package: storybook/packages/storybook-addon/src/preset.ts Lines 321 to 331 in 0a78a27 We're ignoring the configuration entirely here. |
|
Here - we are using it correctly - https://github.com/nuxt-modules/storybook/blob/v8.1.0/packages/storybook-nuxt/src/preset.ts#L111 |
|
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 |
|
@tobiasdiez This fixes the first remaining issue I had - #740 I'm still using the hacked preview file locally though |
|
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. |
|
Still can not. Step by step installed by nightly build instructions Error: 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"
}
... |
|
the dev deps |
|
What should i use as framework in 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 |
|
Seams to be correct: https://github.com/nuxt-modules/storybook/tree/main/examples/starter |
|
It seems to be working. Thank you so much. |
|
Since this seems to work well, could you please release a new version @chakAs3 ❤️ |
|
still have cdnURL error or you think its not related to this problem? |
|
@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. |
|
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)) |
|
i created new issue #753 and no with this error storie doesnt work at all |
|
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/26031And 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 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. |
|
@tobiasdiez , it seems that the paths problems arise when the Nuxt app has |
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
The text was updated successfully, but these errors were encountered: