vinext dev: "createContext is not a function" rendering @chakra-ui/react (Chakra UI v3) from a Server Component
Problem
vinext dev crashes with createContext is not a function on any route that renders a @chakra-ui/react (Chakra UI v3) component directly from a Server Component. vinext build / the built Worker are unaffected — this is a dev-server-only bug.
Internal server error: createContext is not a function
at runInRunnerObject (workers/runner-worker/index.js:107:3)
at [object Object]
at handleAppRscRequest (.../vinext/dist/server/app-rsc-handler.js:747:33)
at cacheComponents (.../vinext/dist/server/app-rsc-handler.js:904:16)
at appRscHandler (.../vinext/dist/server/app-rsc-handler.js:925:15)This looks like the same class of issue as #100 / #137 (barrel import pulls a client-only createContext() call into the react-server condition), but for @chakra-ui/react specifically, which I don't think the vinext:optimize-imports allowlist covers yet — and unlike radix-ui, Chakra v3 doesn't ship individual per-component packages to rewrite imports to (it's one package, @chakra-ui/react, with ~290 files that each correctly declare "use client" — verified by grepping node_modules/@chakra-ui/react/dist). So the "rewrite radix-ui → @radix-ui/react-slot" style fix in #137 may not directly transfer; this might need either adding @chakra-ui/react to whatever allowlist/heuristic decides which barrels to pre-optimize, or a fix that doesn't depend on there being a separate per-component package to redirect to.
Environment
vinext: 1.0.0-beta.9@vinext/cloudflare: 1.0.0-beta.7@cloudflare/vite-plugin: 1.54.9vite: 8.3.0@chakra-ui/react: 3.37.0react/react-dom: 19.3.0- Node: v22.13.0, macOS (Apple Silicon)
Repro
npx [email protected] my-app --platform cloudflare --use-pnpm --yescd my-app && pnpm add @chakra-ui/react @emotion/react- Replace
app/page.tsxwith:import { Box } from "@chakra-ui/react"; export default function Page() { return <Box>Hello</Box>; } pnpm dev, thencurl http://localhost:3000/
Expected: page renders. Actual: 500, createContext is not a function.
Isolation notes
In my actual app (a much larger Next.js app on vinext), I confirmed:
- A page with no Chakra import renders fine (200 OK) on the same dev server.
- Removing the root layout's
ChakraProvider/next-themesThemeProvider/a custom session context provider did not fix it — the crash happens purely from a Server Component page importing and rendering Chakra components (Box,Table.Root,Badge, etc.) directly, regardless of what wraps them. - Adding
@chakra-ui/reactand@ark-ui/react(Chakra's underlying primitives) tooptimizeDeps.excludeinvite.config.tssilenced a separate "client component dependency is inconsistently optimized" warning for@ark-ui/reactinternals, but did not fix this crash. pnpm buildsucceeds completely (all 5 build steps, RSC environment included) and the built Worker serves Chakra pages correctly viawrangler dev --config dist/server/wrangler.json— so this is specific tovinext dev's live/on-demand RSC bundling path, not the production build's static analysis.
Happy to share more of the actual repro if useful — kept this report to a minimal standalone reproduction instead of linking a private app repo.
Source: cloudflare/vinext