fix: auto-import $fetch where possible

[wattanx]

🔗 Linked issue

FIxes: #1867

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The cause differs from upstream, but the same error occurs in bridge, so this PR fixes it.

On the client, globalThis.$fetch is set in a plugin (nitro-bridge.client.mjs), but Nuxt 2's .nuxt/index.js evaluates App.js (which statically imports layouts) and store.js (which requires store modules) before plugins.

As a result, using $fetch at the top level of a module reachable from a layout or store throws ReferenceError: $fetch is not defined on the client and breaks hydration.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/bridge@1927

npm i https://pkg.pr.new/@nuxt/bridge-schema@1927

commit: 17335ad

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: d116fabf-c2e8-46d2-9b24-a0bfe14f0804

---

📥 Commits

Reviewing files that changed from the base of the PR and between 551c465 and 17335ad.

---

📒 Files selected for processing (11)

• knip.json
• packages/bridge/src/app.ts
• packages/bridge/src/imports/presets.ts
• packages/bridge/src/runtime/composables/fetch.ts
• packages/bridge/src/runtime/composables/ssr.ts
• packages/bridge/src/runtime/nitro-bridge.client.mjs
• packages/bridge/test/mocks/fetch.mjs
• playground/composables/global-fetch.ts
• playground/layouts/custom.vue
• test/bridge.test.ts
• vitest.config.ts

---

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

---

---

📝 Walkthrough

Walkthrough

The bridge generates a typed fetch module and registers its $fetch export for auto-import. Runtime composables use that instance, while server-side request fetch remains preferred when available. The playground adds a custom fetch example and a browser test. Vitest maps the generated module to a test mock, and the playground entry pattern includes composables.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

---

Merge Risk: ⚪ Minimal · up to 17335

The change makes $fetch available to the top-level playground composable before it runs. No actionable merge-blocking risk remains after normal checks.

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 9 files. (2 skipped: 2 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title clearly identifies the main change: making $fetch available through auto-imports where possible. It is concise and specific to the reported bug fix.
Description check		The description explains the client-side evaluation-order issue, the resulting ReferenceError, and the intended hydration fix. It is directly related to the changeset.
Linked Issues check		Issue #1867 requests auto-importing $fetch where possible and porting the related upstream behavior. The PR generates #build/fetch.mjs, registers $fetch in granularAppPresets, and uses the gen…
Out of Scope Changes check		The changes stay within issue #1867. The generated fetch module, auto-import preset, runtime import updates, client side-effect import, Vitest mock alias, playground fixture, workspace pattern, and hy…

---

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 9 files. (2 skipped: 2 unsupported.)

---

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/bridge/src/app.ts

typescript-eslint does not support TS 7.0.
Please see https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0 to run typescript-eslint using the TS 6 API.
See also typescript-eslint/typescript-eslint#10940 for tracking typescript-eslint's support for TS >=7.1

Oops! Something went wrong! :(

ESLint: 9.39.4

Error: typescript-eslint does not support TS 7.0.
at Object. (/.eslint-tmp/node_modules/.pnpm/typescript-eslint@8.71.1_eslint@9.39.4_jiti@1.21.7_supports-color@7.2.0__supports-color@7.2.0_typescript@7.0.2/node_modules/typescript-eslint/dist/index.js:52:11)
at Module._compile (node:internal/modules/cjs/loader:1830:14)
at Object..js (node:internal/modules/cjs/loader:1961:10)
at Module.load (node:internal/modules/cjs/loader:1553:32)
at Module._load (node:internal/modules/cjs/loader:1355:12)
at wrapModuleLoad (node:internal/modules/cjs/loader:255:19)
at loadCJSModuleWithModuleLoad (node:internal/modules/esm/translators:326:3)
at ModuleWrap. (node:internal/modules/esm/translators:231:7)
at ModuleJob.run (node:internal/modules/esm/module_job:437:25)
at async node:internal/modules/esm/loader:639:26

---

packages/bridge/src/imports/presets.ts

ESLint skipped: the matched ESLint configuration already failed (config-incompatibility).

---

packages/bridge/src/runtime/composables/fetch.ts

ESLint skipped: the matched ESLint configuration already failed (config-incompatibility).

---

• 7 others

---

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}