nuxt-modules
[Bug]: package is incompatible with Storybook 8.6.0
Environment
- Operating System: Windows_NT
- Node Version: v22.13.1
- Nuxt Version: 3.13.2
- CLI Version: 3.15.0
- Nitro Version: 2.9.7
- Package Manager: [email protected]
- Builder: -
- User Config: default
- Runtime Modules: maz-ui/nuxt, @vueuse/[email protected], @nuxtjs/[email protected], [email protected], @element-plus/[email protected], @nuxtjs/[email protected], @hebilicious/[email protected], @nuxt/[email protected], @vee-validate/[email protected], [email protected], @nuxtjs/[email protected]
- Build Modules: -
Reproduction
not exist
Describe the bug
When i install storybook in my nuxt project using this command : "pnpm dlx storybook@latest init" i get this error when run storybook server:
WARN The following packages are incompatible with Storybook 8.6.0 as they depend on different major versions of Storybook packages: WARN - @nuxtjs/[email protected] WARN Repo: https://storybook.nuxtjs.org 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
Additional context
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook-vue\nuxt\preset.
Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
If you believe this is a bug, please open an issue on Github.
ReferenceError: module is not defined at file:///~toProject/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_nuxt@3._qpmjg76uwtxnjdwz4dzapenlzy/node_modules/@storybook-vue/nuxt/preset.js:1:1 at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35) at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47) at loadESMFromCJS (node:internal/modules/cjs/loader:1411:24) at Module._compile (node:internal/modules/cjs/loader:1544:5) at node:internal/modules/cjs/loader:1668:16 at Object.newLoader (.\node_modules.pnpm\[email protected][email protected]\node_modules\esbuild-register\dist\node.js:2262:9) at extensions..js (.\node_modules.pnpm\[email protected][email protected]\node_modules\esbuild-register\dist\node.js:4833:24) at Module.load (node:internal/modules/cjs/loader:1313:32) at Function._load (node:internal/modules/cjs/loader:1123:12)
More info:
at loadPreset (.\node_modules\.pnpm\@[email protected][email protected][email protected][email protected]_\node_modules\@storybook\core\dist\common\index.cjs:16515:13)
WARN Broken build, fix the error above. WARN You may need to refresh the browser.
ELIFECYCLE Command failed with exit code 1.
@yousef-n-daaboul I also encountered this problem.
NODE_OPTIONS='--no-experimental-require-module' will help you temporarily work around this problem.
I'm using yarn.
NODE_OPTIONS='--no-experimental-require-module' yarn storybook
Encountered this today with a brand new Nuxt project. I ran pnpm create storybook@latest and hasn't done any changes to the default setup except for moving all sb files inside ./stories/.
It still runs just fine, and I was able to add a11y with pnpm exec storybook add @storybook/addon-a11y. This bug doesn't seem to break anything, but it does log warnings for Storybook 8.6.4.
+1 for this issue still happening.
This issue occurs when running yarn create storybook in a fresh Nuxt project. From what I could tell it looks as though this module requires storybook 8.3 however 8.3 is incompatible with the latest Vite version 6.
It looks as though this error is ignorable for the time being as storybook still seems to be functional.
To add to this, in terms of a reproduction, the showcase example provided in the documentation also has this issue. https://stackblitz.com/edit/nuxt-modules-storybook-bm5qmnfm
I am still unsure whether the storybook incompatibility is linked to the issue of the storybook not showing correctly in devtools though. In my local version I can't get the storybook module to appear in my modules tab at all.
yep. can confirm im having the exact same issue. easy enough to replicate. create a new nuxt app. run pnpm dlx storybook@latest init and wait for it to blow up. tried updating to nightly for the @nuxtjs/storybook and @storybook-vue/nuxt, didn't work. running windows 11 and the pnpm manager for context.
ReferenceError: module is not defined
at file:///F:/[path to root of project]/node_modules/.pnpm/@[email protected]_8e452b476838b254ac52ff0619b28e5f/node_modules/@storybook-vue/nuxt/preset.js:1:1
at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:360:47)
at loadESMFromCJS (node:internal/modules/cjs/loader:1385:24)
at Module._compile (node:internal/modules/cjs/loader:1536:5)
at node:internal/modules/cjs/loader:1706:10
at Object.newLoader (.\node_modules\.pnpm\[email protected][email protected]\node_modules\esbuild-register\dist\node.js:2262:9)
at extensions..js (.\node_modules\.pnpm\[email protected][email protected]\node_modules\esbuild-register\dist\node.js:4833:24)
at Module.load (node:internal/modules/cjs/loader:1289:32)
at Function._load (node:internal/modules/cjs/loader:1108:12)
Fresh Nuxt and this module install today, getting this warning after npm run dev:
WARN The following packages are incompatible with Storybook 8.6.12 as they depend on different major versions of Storybook packages:
WARN - @nuxtjs/[email protected]
WARN Repo: https://storybook.nuxtjs.org
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
If it helps:
"@nuxtjs/storybook": "latest",
"@storybook/addon-essentials": "8.6.12",
"@storybook/addon-links": "8.6.12",
"@storybook/blocks": "8.6.12",
"storybook": "^8.6.12",
@drewbaker no, it doesn't help. Even though the process for Storybook starts, if fails with the following error after a couple of seconds:
Error: Build failed with 1 error:
error: The entry point "vue" cannot be marked as external
at failureErrorWithLog (D:\vf\canvas\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1477:15)
at D:\vf\canvas\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:946:25
at D:\vf\canvas\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1355:9
at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
errors: [Getter/Setter],
warnings: [Getter/Setter]
}
The solution to all these issues is installing a more recent version of both storybook and the module (works with Nuxt 4).
Try installing the latest nightly (atm that is @nuxtjs/[email protected]). That version is compatible with [email protected] (same version for addons and eslint plugin).
This is what my pnpm catalog looks like:
# pnpm-workspace.yaml
catalogs:
storybook:
"storybook": &storybook "9.0.17"
"@storybook/addon-a11y": *storybook
"@storybook/addon-docs": *storybook
"@storybook/addon-queryparams": "7.0.1"
"@storybook/addon-vitest": *storybook
"@storybook/vue3": *storybook
"@chromatic-com/storybook": "4.0.1"
"@nuxtjs/storybook": "8.4.2-29212946.04b4f98"
"eslint-plugin-storybook": *storybook
*storybook is an alias to the &storybook anchor to ensure all those packages use the same version as core (v9.0.17 in this case since that is the one this version of the module expects).
Make sure to replicate on your project's package.json or copy the catalog to you pnpm workspace config if you prefer using catalogs like I do 👍
I am still unsure whether the storybook incompatibility is linked to the issue of the storybook not showing correctly in devtools though. In my local version I can't get the storybook module to appear in my modules tab at all.
devtools tab works when using the versions of the module and storybook I mentioned on my previous comment.
Let me know if that fixes the issue for you 👍
New version released v9.0.0 compatible with Storybook 9 and Nuxt 4. please update to latest. https://github.com/nuxt-modules/storybook/releases/tag/v9.0.0
when I do npx storybook@latest init in nuxt4, error was occurred.
✔ What configuration should we install? › Recommended: Component dev, docs, test
• Detecting project type. ✓
• Adding Storybook support to your "Nuxt" app
✅ Getting the correct version of 2 packages
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/storybook
npm error peer storybook@"9.0.5" from @nuxtjs/[email protected]
npm error node_modules/@nuxtjs/storybook
npm error dev @nuxtjs/storybook@"^8.4.1" from the root project
npm error peer storybook@"9.0.5" from @storybook-vue/[email protected]
npm error node_modules/@nuxtjs/storybook/node_modules/@storybook-vue/nuxt
npm error @storybook-vue/nuxt@"8.4.1" from @nuxtjs/[email protected]
npm error node_modules/@nuxtjs/storybook
npm error dev @nuxtjs/storybook@"^8.4.1" from the root project
npm error 6 more (@storybook/builder-vite, @storybook/csf-plugin, ...)
npm error
npm error Could not resolve dependency:
npm error dev @storybook/addon-docs@"^9.1.2" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/storybook
npm error peer storybook@"^9.1.2" from @storybook/[email protected]
npm error node_modules/@storybook/addon-docs
npm error dev @storybook/addon-docs@"^9.1.2" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
