Skip to content

fix(storybook-addon): Issue 993 proxy errors#994

Open
akornmeier wants to merge 15 commits intonuxt-modules:mainfrom
akornmeier:fix/993-proxy-errors
Open

fix(storybook-addon): Issue 993 proxy errors#994
akornmeier wants to merge 15 commits intonuxt-modules:mainfrom
akornmeier:fix/993-proxy-errors

Conversation

@akornmeier
Copy link
Copy Markdown
Contributor

@akornmeier akornmeier commented Jan 7, 2026

Summary of Changes

Fix: Storybook Proxy Configuration

  • Added @unhead/vue dependency and explicit Unhead initialization in Storybook preview for compatibility with plugins that rely on useHead() (such as @nuxt/ui and others)
  • Updated the Storybook Vite proxy configuration to dynamically use the correct dev server URL
  • Excluded the /builds/meta route from proxying to prevent unnecessary 404 errors

Dependency Fixes

  • Added pnpm override to pin h3 to 1.15.4 to prevent version conflict between h3 v1 (Nuxt runtime) and h3 v2 RC (resolved by nuxt-site-config), which caused prerender errors

These changes prevent the errors that created the memory-leak in the module that crashed-out the proxy server.

@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 7, 2026

👷 Deploy request for nuxt-storybook pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit d877ee0

@tobiasdiez
Copy link
Copy Markdown
Collaborator

Thanks, there is a lot of things going on in this PR. Could you please split it in more manageable parts (i.e. the nuxt-ui-pro migration can be split of, same for the revamp of the playground).

@akornmeier
Copy link
Copy Markdown
Contributor Author

Thanks, there is a lot of things going on in this PR. Could you please split it in more manageable parts (i.e. the nuxt-ui-pro migration can be split of, same for the revamp of the playground).

I was just doing that exact thing. I'll revert the wholesale change to playground/, I agree that was a little ambitious for this proxy fix.

I noticed an issue or two mentioning updating some of the examples, maybe that is a better place to add something like I did for playground (and in a different PR).

I had to change the nuxt-ui-pro dep due to the changes in playground, so I can back that out too.

I will push an update soon.

@tobiasdiez
Copy link
Copy Markdown
Collaborator

Thanks! It's good to have those changes as well (in particular the nuxt-ui upgrade), just transfer them to a new PR please.

@akornmeier
Copy link
Copy Markdown
Contributor Author

@tobiasdiez / @chakAs3 - I have split the original PR into 3 more focused issue/PRs. I feel confident the memory leak and dependency version issues have been resolved. Here are the related PRs that should complete the Storybook 10.x + Nuxt 4.x upgrade.

@akornmeier
Copy link
Copy Markdown
Contributor Author

akornmeier commented Jan 13, 2026

@tobiasdiez / @chakAs3 - I have split the original PR into 3 more focused issues/PRs. The memory leak and dependency version issues have been resolved. Here are the related PRs that should complete the Storybook 10.x + Nuxt 4.x upgrade.

* [fix(docs): upgrade to @nuxt/ui v4 with Tailwind CSS v4 #996](https://github.com/nuxt-modules/storybook/pull/996)

* [docs: align version requirements for Nuxt 4.x and Storybook 10.x #998](https://github.com/nuxt-modules/storybook/pull/998)

Checking in on these updates. I'd love to get the Nuxt + Storybook plugin aligned with the current versions of both tools. Is there anything you need me to do with these 3 PRs to merge them and cut the new v10 release?

@chakAs3
Copy link
Copy Markdown
Collaborator

chakAs3 commented Jan 15, 2026

@tobiasdiez / @chakAs3 - I have split the original PR into 3 more focused issues/PRs. The memory leak and dependency version issues have been resolved. Here are the related PRs that should complete the Storybook 10.x + Nuxt 4.x upgrade.

* [fix(docs): upgrade to @nuxt/ui v4 with Tailwind CSS v4 #996](https://github.com/nuxt-modules/storybook/pull/996)

* [docs: align version requirements for Nuxt 4.x and Storybook 10.x #998](https://github.com/nuxt-modules/storybook/pull/998)

Checking in on these updates. I'd love to get the Nuxt + Storybook plugin aligned with the current versions of both tools. Is there anything you need me to do with these 3 PRs to merge them and cut the new v10 release?

I will do final review and test before merging them then i ll cut 10v release

@rpauls-scayle
Copy link
Copy Markdown

Hi @chakAs3 / @akornmeier is there any additional assistance required for the v10 release i can support with?

@chakAs3
Copy link
Copy Markdown
Collaborator

chakAs3 commented Jan 27, 2026

@akornmeier @rpauls-scayle it is crashing when i run pnpm dev. i could not test using the main playground
either pnpm example:showcase:dev

@rpauls-scayle
Copy link
Copy Markdown

rpauls-scayle commented Jan 28, 2026

Can verify, running pnpm dev from this branch, results in Storybook crashing during startup of the dev server, same running pnpm example:showcase:dev:

pnpm dev        

> nuxt-storybook@ dev /Users/robert.pauls/Development/github/nuxt-storybook
> pnpm run --filter=./playground/** dev

packages/storybook-addon                 |  WARN  Unsupported engine: wanted: {"node":">=20.19.0"} (current: {"node":"v20.18.1","pnpm":"10.28.2"})

> nuxt-storybook-playground@ dev /Users/robert.pauls/Development/github/nuxt-storybook/playground
> nuxt dev

│                                                                                                                                                                                                                                                                                                                                        12:02:47 PM
●  Nuxt 4.2.2 (with Nitro 2.12.9, Vite 7.3.0 and Vue 3.5.26)
                                                                                                                                                                                                                                                                                                                                         12:02:47 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

verbose 🔌  Storybook Module Setup                                                                                                                                                                                                                                                                                        nuxt:storybook 12:02:48 PM
  ➜ DevTools: press Shift + Option + D in the browser (v3.1.1)                                                                                                                                                                                                                                                                           12:02:48 PM

verbose Starting Storybook                                                                                                                                                                                                                                                                                                nuxt:storybook 12:02:48 PM

 ERROR  Storybook failed to load the following preset: /Users/robert.pauls/Development/github/nuxt-storybook/playground/.storybook/main.ts.                                                                                                                                                                         nuxt:storybook:build 12:02:49 PM

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.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @chromatic-com/storybook.

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.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: /Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/@chromatic-com+storybook@4.1.3_storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3_8e49d3d361dbdebbf9df777e9c3afdb5/node_modules/@chromatic-com/storybook/dist/preset.js.

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.

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/core-server/index.js from /Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/@chromatic-com+storybook@4.1.3_storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3_8e49d3d361dbdebbf9df777e9c3afdb5/node_modules/@chromatic-com/storybook/dist/preset.js not supported.
Instead change the require of index.js in /Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/@chromatic-com+storybook@4.1.3_storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3_8e49d3d361dbdebbf9df777e9c3afdb5/node_modules/@chromatic-com/storybook/dist/preset.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/@chromatic-com+storybook@4.1.3_storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3_8e49d3d361dbdebbf9df777e9c3afdb5/node_modules/@chromatic-com/storybook/dist/preset.js:7:18)

More info: 

    at loadPreset (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10101:13)
    at async Promise.all (index 0)
    at async loadPresets (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10110:73)
    at async loadPreset (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10083:12)
    at async Promise.all (index 1)
    at async loadPresets (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10110:73)
    at async loadPreset (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10084:12)
    at async Promise.all (index 1)
    at async loadPresets (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10110:73)
    at async getPresets (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10141:23)

More info: 

    at loadPreset (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10101:13)
    at async Promise.all (index 1)
    at async loadPresets (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10110:73)
    at async loadPreset (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10084:12)
    at async Promise.all (index 1)
    at async loadPresets (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10110:73)
    at async getPresets (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10141:23)
    at async buildDevStandalone (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/core-server/index.js:7163:17)
    at async withTelemetry (file:///Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-2372JZ52.js:209:12)
    at async setupStorybook (/Users/robert.pauls/Development/github/nuxt-storybook/packages/nuxt-module/src/storybook.ts:79:18)

More info: 


    at loadPreset (/Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10101:13)
    at async Promise.all (index 1)
    at async loadPresets (/Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10110:73)
    at async getPresets (/Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-Q4DOC7HF.js:10141:23)
    at async buildDevStandalone (/Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/core-server/index.js:7163:17)
    at async withTelemetry (/Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/_node-chunks/chunk-2372JZ52.js:209:12)
    at async setupStorybook (/Users/robert.pauls/Development/github/nuxt-storybook/packages/nuxt-module/src/storybook.ts:79:18)


 WARN                                                                                                                                                                                                                                                                                                               nuxt:storybook:build 12:02:49 PM
          Broken build, fix the error above.
          You may need to refresh the browser.
        

✔ Vite client built in 572ms                                                                                                                                                                                                                                                                                                            12:02:49 PM
│                                                                                                                                                                                                                                                                                                                                        12:02:49 PM
▲  Failed to load preset:
│  {"name":"/Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/@chromatic-com+storybook@4.1.3_storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3_8e49d3d361dbdebbf9df777e9c3afdb5/node_modules/@chromatic-com/storybook/dist/preset.js"}
│  on level 2
│                                                                                                                                                                                                                                                                                                                                        12:02:49 PM
■  Error [ERR_REQUIRE_ESM]: require() of ES Module
│  /Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3.7.4_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/storybook/dist/core-server/index.js
│  from
│  /Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/@chromatic-com+storybook@4.1.3_storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3_8e49d3d361dbdebbf9df777e9c3afdb5/node_modules/@chromatic-com/storybook/dist/preset.js
│  not supported.
│  Instead change the require of index.js in
│  /Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/@chromatic-com+storybook@4.1.3_storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3_8e49d3d361dbdebbf9df777e9c3afdb5/node_modules/@chromatic-com/storybook/dist/preset.js
│  to a dynamic import() which is available in all CommonJS modules.
│  at Object.<anonymous>
│  (/Users/robert.pauls/Development/github/nuxt-storybook/node_modules/.pnpm/@chromatic-com+storybook@4.1.3_storybook@10.1.11_@testing-library+dom@10.4.1_prettier@3_8e49d3d361dbdebbf9df777e9c3afdb5/node_modules/@chromatic-com/storybook/dist/preset.js:7:18)
✔ Vite server built in 57ms                     

@akornmeier is one of your other split out PR a prerequisite for this PR? 🤔

@akornmeier
Copy link
Copy Markdown
Contributor Author

akornmeier commented Jan 28, 2026 via email

@rpauls-scayle
Copy link
Copy Markdown

@chakAs3 / @akornmeier I had another quick look today:

Looks like the startup issues with ERR_REQUIRE_ESM have simply been caused by trying to run all relevant dev command with Node v20. Running with Node v22 or Node v24 resolves these.

So we might want to consider updating the minimum Node version to at least >=22.0.0.
This is relevant for the following two package.json files:

  • packages/nuxt-module/package.json
  • packages/storybook-addon/package.json

In regard to running pnpm example:showcase:dev we're currently getting a 404 after startup if we simply open http://localhost:3000 in the browser.

This appears to be expected, as we do not have a default index.vue within examples/showcase/pages that would be used for /. If we simply open http://localhost:3000/HelloWorld, the application works without issues.

@rbenzazon
Copy link
Copy Markdown

Hello, Thanks for the support ! I would like to know if I can use a nightly build of some sort to test the fix for the proxy errors, or do I need to use the commit as a npm dep?, I have a fresh project with updated version and I can't make storybook work, since my project is at an early stage I don't mind testing if it helps me start building my stories
Regards

@braedenfoster
Copy link
Copy Markdown

Is anyone working on a fix for resolving the startup issues in this PR? Seems to have stalled.

@chakAs3
Copy link
Copy Markdown
Collaborator

chakAs3 commented Mar 2, 2026

@akornmeier any chance to get it fixed ?

import { $fetch } from 'ofetch'
import { createHead as createClientHead } from '@unhead/vue/client'
// The headSymbol is just the string "usehead" used for Vue's provide/inject
const headSymbol = 'usehead'
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unhead exports headSymbol, it's probably better to use the exported var in case unhead changes to an actual Symbol() in the future

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But i'm not sure how this relates to the proxy issues

konabe added a commit to konabe/classical-music-lake that referenced this pull request Apr 29, 2026
## Summary

- `pnpm run dev` 実行時に `/_nuxt/@vite/client` などが 500 を返し、SPA
がブートストラップできない事象の暫定対応
- `nuxt.config.ts` の `modules` 配列から `@nuxtjs/storybook` を一旦外す

## 背景・原因

`@nuxtjs/storybook@9.0.1` の peer dependency は `storybook ~9.0.5`
だが、本プロジェクトは `storybook@10.3.5` を使用しているため、Storybook 10 の API
変更に追従できず、モジュールが登録した `/_nuxt/*` Vite proxy が機能しない(接続先が listen しない →
ECONNREFUSED)。

upstream で修正 PR
([nuxt-modules/storybook#994](nuxt-modules/storybook#994))
がレビュー中のため、それがマージ・リリースされるまでの暫定回避。

## 影響

- ❌ `pnpm dev` 起動時に Storybook も同時起動する機能 → 動かなくなる(もともと壊れていた)
- ✅ Storybook 単独起動 (`pnpm storybook`) → 引き続き利用可能
- ✅ CI の `pnpm run build-storybook` → スタンドアロンで動くため影響なし
- ✅ デプロイされる Storybook サイト → 影響なし

## 恒久対応

追跡 issue: #590

## Test plan

- [x] `pnpm run dev` で SPA が起動し、`/auth/login` `/auth/user-register`
が表示される
- [x] `pnpm run lint` 通過
- [ ] `pnpm storybook` が単独起動できることを確認

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Nuxt 4 http proxy errors on fresh nightly install

7 participants