Incompatible with Nuxt 3.16

[MortenROSE]

Describe the bug

Wenn upgrading to Nuxt 3.16.2 histoire is unable to start due to this Error

> histoire dev

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/nitropack/dist/core/index.mjs:2415
    const baseURL = import.meta.baseURL || "/";
                           ^^^^

SyntaxError: Cannot use 'import.meta' outside a module
    at new Script (node:vm:117:7)
    at createScript (node:vm:269:10)
    at Object.runInThisContext (node:vm:317:10)
    at evalModule (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/jiti/dist/jiti.js:1:247124)
    at jiti (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/jiti/dist/jiti.js:1:245241)
    at /Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/nuxt/dist/shared/nuxt.iYoBCR2R.mjs:45:18
    at evalModule (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/jiti/dist/jiti.js:1:247313)
    at jiti (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/jiti/dist/jiti.js:1:245241)
    at /Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/nuxt/dist/index.mjs:1:484
    at evalModule (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/jiti/dist/jiti.js:1:247313)
    at jiti (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/jiti/dist/jiti.js:1:245241)
    at /Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/@nuxt/kit/dist/index.mjs:2712:124
    at async loadNuxt (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/@nuxt/kit/dist/index.mjs:2712:37)
    at async useNuxtViteConfig (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/@histoire/plugin-nuxt/dist/index.js:101:16)
    at async Object.defaultConfig (/Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/@histoire/plugin-nuxt/dist/index.js:17:30)
    at async processDefaultConfig (file:///Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/histoire/dist/node/config.js:255:28)
    at async resolveConfig (file:///Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/histoire/dist/node/config.js:237:36)
    at async createContext (file:///Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/histoire/dist/node/context.js:5:20)
    at async start (file:///Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/histoire/dist/node/commands/dev.js:9:21)
    at async devCommand (file:///Users/morten.sassi/Sites/01-ROSESHOP/evon/node_modules/histoire/dist/node/commands/dev.js:41:12)

Node.js v22.14.0

Reproduction

https://stackblitz.com/edit/histoire-nuxt3-starter-faxitby6

System Info

System:
    OS: macOS 14.7.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 87.22 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.n/bin/node
    npm: 10.9.2 - ~/.n/bin/npm
    pnpm: 9.14.2 - ~/.n/bin/pnpm
  Browsers:
    Safari: 18.4
  npmPackages:
    @histoire/plugin-nuxt: ^0.17.17 => 0.17.17 
    @histoire/plugin-vue: ^0.17.17 => 0.17.17 
    histoire: ^0.17.17 => 0.17.17

Used Package Manager

npm

Validations

• [x] Follow our Code of Conduct
• [x] Read the Contributing Guidelines.
• [x] Read the docs.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• histoire-nuxt3-starter-faxitby6 (Open reproduction)

[shadura]

The same

[maximilianmaihoefner]

I managed to resolve this issue by using the v1 alpha release of histoire, e.g. "1.0.0-alpha.2". It's not ideal but is a decent enough solution for me right now.

[MortenROSE]

I managed to resolve this issue by using the v1 alpha release of histoire, e.g. "1.0.0-alpha.2". It's not ideal but is a decent enough solution for me right now.

How tho?

when i update the three packages i face this error

{
  "dependencies": {
        "@histoire/plugin-nuxt": "^1.0.0-alpha.2",
        "@histoire/plugin-vue": "^1.0.0-alpha.2",
        "histoire": "^1.0.0-alpha.2",
  }
}

~#@❯ npm i ❮ 
npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: evon@undefined npm error Found: @histoire/[email protected] npm error node_modules/@histoire/plugin-nuxt npm error dev @histoire/plugin-nuxt@"^1.0.0-alpha.2" from the root project npm error npm error Could not resolve dependency: npm error dev @histoire/plugin-nuxt@"^1.0.0-alpha.2" from the root project npm error npm error Conflicting peer dependency: @histoire/[email protected] npm error node_modules/@histoire/plugin-vue npm error peer @histoire/plugin-vue@"^1.0.0-alpha.2" from @histoire/[email protected] npm error node_modules/@histoire/plugin-nuxt npm error dev @histoire/plugin-nuxt@"^1.0.0-alpha.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: npm error /Users/morten/.npm/_logs/2025-04-28T08_50_09_188Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/morten/.npm/_logs/2025-04-28T08_50_09_188Z-debug-0.log

[maximilianmaihoefner]

I managed to resolve this issue by using the v1 alpha release of histoire, e.g. "1.0.0-alpha.2". It's not ideal but is a decent enough solution for me right now.

How tho?

when i update the three packages i face this error

{ "dependencies": { "@histoire/plugin-nuxt": "^1.0.0-alpha.2", "@histoire/plugin-vue": "^1.0.0-alpha.2", "histoire": "^1.0.0-alpha.2", } } ~#@❯ npm i ❮  npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: evon@undefined npm error Found: @histoire/[email protected] npm error node_modules/@histoire/plugin-nuxt npm error dev @histoire/plugin-nuxt@"^1.0.0-alpha.2" from the root project npm error npm error Could not resolve dependency: npm error dev @histoire/plugin-nuxt@"^1.0.0-alpha.2" from the root project npm error npm error Conflicting peer dependency: @histoire/[email protected] npm error node_modules/@histoire/plugin-vue npm error peer @histoire/plugin-vue@"^1.0.0-alpha.2" from @histoire/[email protected] npm error node_modules/@histoire/plugin-nuxt npm error dev @histoire/plugin-nuxt@"^1.0.0-alpha.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: npm error /Users/morten/.npm/_logs/2025-04-28T08_50_09_188Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/morten/.npm/_logs/2025-04-28T08_50_09_188Z-debug-0.log

The dependencies look right to me, but it looks like something is still trying to pull @histoire/[email protected]. Maybe you have it specified somewhere else as well? Maybe deleting node_modules and the package-lock.json will help? I haven't used npm in a while, in pnpm there is pnpm why <package> to figure out where a package is being pulled in from, maybe npm has something similar by now?

[MortenROSE]

@maximilianmaihoefner thanks for pointing that out! now i am facing another issue but am not sure if it is related to the topic here. will update later

[MortenROSE]

With nuxt 3.17 i can get histoire to run but face these Errors

TypeError [ERR_INVALID_ARG_TYPE]: The "event" argument must be an instance of Event. Received an instance of MessageEvent
    at BroadcastChannel.dispatchEvent (node:internal/event_target:757:13)
    at BroadcastChannel.onMessageEvent (node:internal/worker/io:348:8)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)

for all my stories

UPDATE: Went from node 22 to 20 and now it works fine!

[genu]

Is this still an issue with Nuxt 3.17.2? I'm not seeing the error above.

i'm not node v22.14.0

[leo91000]

With nuxt 3.17 i can get histoire to run but face these Errors

TypeError [ERR_INVALID_ARG_TYPE]: The "event" argument must be an instance of Event. Received an instance of MessageEvent
    at BroadcastChannel.dispatchEvent (node:internal/event_target:757:13)
    at BroadcastChannel.onMessageEvent (node:internal/worker/io:348:8)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)

for all my stories

UPDATE: Went from node 22 to 20 and now it works fine!

Had the same issue and downgrading node worked for me too. Nuxt 3.17.4

[leo91000]

To reproduce the exact BroadcastChannel issue in histoire, you must useCookie somewhere within your histoire setup (for me it was in a client plugin). Not using useCookie actually fixes the issue in node 22+

I tried really hard to find where the bug was without success, wasted a few hours. It's somewhere between node.js / JSDom / histoire. Node.JS creates on it's own the Event, that must comme from JSDom (otherwise I don't see). The require('internal/deps/undici/undici').createFastMessageEvent seems to create event from JSDom, but node.js check instanceof real Event.

The only similar I could find is here https://github.com/nodejs/undici/issues/2663, but not sure if it is related