[Bug]: package is incompatible with Storybook 8.6.0

[yousef-n-daaboul]

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: pnpm@9.9.0
• Builder: -
• User Config: default
• Runtime Modules: maz-ui/nuxt, @vueuse/nuxt@11.0.3, @nuxtjs/i18n@8.5.3, nuxt-typed-router@3.6.5, @element-plus/nuxt@1.0.10, @nuxtjs/tailwindcss@6.12.1, @hebilicious/vue-query-nuxt@0.3.0, @nuxt/eslint@0.6.0, @vee-validate/nuxt@4.14.6, nuxt-svgo@4.0.7, @nuxtjs/storybook@8.3.3
• 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/storybook@8.3.3
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 storybookjs/storybook#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/@storybook-vue+nuxt@8.3.3_@types+node@22.7.9_eslint@9.13.0_jiti@2.3.3__magicast@0.3.5_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\esbuild-register@3.6.0_esbuild@0.24.0\node_modules\esbuild-register\dist\node.js:2262:9)
at extensions..js (.\node_modules.pnpm\esbuild-register@3.6.0_esbuild@0.24.0\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\@storybook+core@8.6.0_prettier@3.3.3_storybook@8.6.0_prettier@3.3.3_\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.

[MarcoTroost]

bump

[mitsuru]

@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

[CasperSocio]

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.

[danieelbog]

After upgrading to storybook 8.6.6 I don't dace any issues

[maxswann-nexuspoint]

+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.

[maxswann-nexuspoint]

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.

[binaryartifex]

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/@storybook-vue+nuxt@8.3.4-2_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\esbuild-register@3.6.0_esbuild@0.25.2\node_modules\esbuild-register\dist\node.js:2262:9)
    at extensions..js (.\node_modules\.pnpm\esbuild-register@3.6.0_esbuild@0.25.2\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)

[drewbaker]

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/storybook@8.3.3
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

[drewbaker]

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",     

[abogdanov-vfc]

@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\esbuild@0.25.3\node_modules\esbuild\lib\main.js:1477:15)                                                                  
    at D:\vf\canvas\node_modules\.pnpm\esbuild@0.25.3\node_modules\esbuild\lib\main.js:946:25
    at D:\vf\canvas\node_modules\.pnpm\esbuild@0.25.3\node_modules\esbuild\lib\main.js:1355:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {       
  errors: [Getter/Setter],
  warnings: [Getter/Setter]                                                                
}

[hacknug]

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/storybook@8.4.2-29212946.04b4f98). That version is compatible with storybook@9.0.17 (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 👍