Skip to content

fix(examples): use webpack in Next.js examples for StackBlitz compatibility#11110

Open
MaNaN1803 wants to merge 1 commit into
TanStack:mainfrom
MaNaN1803:fix/11063-stackblitz-turbopack
Open

fix(examples): use webpack in Next.js examples for StackBlitz compatibility#11110
MaNaN1803 wants to merge 1 commit into
TanStack:mainfrom
MaNaN1803:fix/11063-stackblitz-turbopack

Conversation

@MaNaN1803

@MaNaN1803 MaNaN1803 commented Jul 22, 2026

Copy link
Copy Markdown

Fixes #11063. StackBlitz WebContainers currently do not support the native bindings required for Turbopack (the default in Next.js 15+). This updates all Next.js examples to use the --webpack flag in their dev scripts so the interactive sandboxes in the docs run without crashing.

Summary by CodeRabbit

  • Chores
    • Updated development startup commands across React and Next.js examples and integrations to explicitly use Webpack.
    • Development environments now launch with next dev --webpack for more consistent local behavior.

@coderabbitai

coderabbitai Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: fa0a6a5b-d474-4482-bf4f-1ddbacd8d8ad

📥 Commits

Reviewing files that changed from the base of the PR and between 15aefa9 and 8f8dd75.

📒 Files selected for processing (11)
  • examples/react/auto-refetching/package.json
  • examples/react/infinite-query-with-max-pages/package.json
  • examples/react/load-more-infinite-scroll/package.json
  • examples/react/nextjs-app-prefetching/package.json
  • examples/react/nextjs/package.json
  • examples/react/optimistic-updates-cache/package.json
  • examples/react/optimistic-updates-ui/package.json
  • examples/react/pagination/package.json
  • examples/react/prefetching/package.json
  • integrations/react-next-15/package.json
  • integrations/react-next-16/package.json
🚧 Files skipped from review as they are similar to previous changes (9)
  • examples/react/pagination/package.json
  • examples/react/nextjs-app-prefetching/package.json
  • integrations/react-next-15/package.json
  • examples/react/prefetching/package.json
  • examples/react/nextjs/package.json
  • integrations/react-next-16/package.json
  • examples/react/auto-refetching/package.json
  • examples/react/load-more-infinite-scroll/package.json
  • examples/react/optimistic-updates-cache/package.json

📝 Walkthrough

Walkthrough

Updated 11 Next.js example and integration dev scripts to run next dev --webpack instead of next or next dev.

Changes

Next.js Webpack development scripts

Layer / File(s) Summary
Enable Webpack development mode
examples/react/*/package.json, integrations/react-next-15/package.json, integrations/react-next-16/package.json
The dev scripts now explicitly launch Next.js development mode with Webpack enabled.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

  • TanStack/query#11064: Updates the same React/Next.js example development scripts to use next dev --webpack.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description omits the required template sections and checklist items, so it is incomplete for this repository. Add the required template sections (Changes, Checklist, Release Impact) and fill in the checklist and release-impact items.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: using Webpack in Next.js examples for StackBlitz compatibility.
Linked Issues check ✅ Passed The updated Next.js example scripts match #11063 by switching the affected dev commands to next dev --webpack.
Out of Scope Changes check ✅ Passed The diff only changes dev scripts in affected example package.json files and stays within the StackBlitz/Webpack compatibility fix.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
packages/vue-query/src/queryClient.ts (1)

197-226: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add regression coverage for callable reactive inputs.

Please add runtime and type-level tests in packages/vue-query/src/__tests__/queryClient.test.ts covering function-based filters, options, nested refs, queryKey getters, and refetchType behavior. These overloads introduce both a new public type contract and a new normalization path.

Also applies to: 296-330

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/vue-query/src/queryClient.ts` around lines 197 - 226, Add regression
coverage in queryClient.test.ts for invalidateQueries, exercising callable
filters and options with nested refs, queryKey getters, and refetchType behavior
at runtime. Add type-level assertions confirming these function-based inputs
satisfy the new invalidateQueries overloads and preserve the public contract.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/vue-query/src/queryClient.ts`:
- Around line 197-226: Add regression coverage in queryClient.test.ts for
invalidateQueries, exercising callable filters and options with nested refs,
queryKey getters, and refetchType behavior at runtime. Add type-level assertions
confirming these function-based inputs satisfy the new invalidateQueries
overloads and preserve the public contract.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6c914438-e201-4b86-928a-5af200a3336a

📥 Commits

Reviewing files that changed from the base of the PR and between 86bb8a6 and 15aefa9.

📒 Files selected for processing (12)
  • examples/react/auto-refetching/package.json
  • examples/react/infinite-query-with-max-pages/package.json
  • examples/react/load-more-infinite-scroll/package.json
  • examples/react/nextjs-app-prefetching/package.json
  • examples/react/nextjs/package.json
  • examples/react/optimistic-updates-cache/package.json
  • examples/react/optimistic-updates-ui/package.json
  • examples/react/pagination/package.json
  • examples/react/prefetching/package.json
  • integrations/react-next-15/package.json
  • integrations/react-next-16/package.json
  • packages/vue-query/src/queryClient.ts

@MaNaN1803
MaNaN1803 force-pushed the fix/11063-stackblitz-turbopack branch from 15aefa9 to 8f8dd75 Compare July 24, 2026 04:54
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.

Next.js examples fail on StackBlitz due to Turbopack usage in interactive sandbox

1 participant