#3316·vinext

vinext dev: "createContext is not a function" rendering @chakra-ui/react (Chakra UI v3) from a Server Component

Author: fmigueltCreated Sep 17, 2026Updated Sep 17, 2026

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.9
  • vite: 8.3.0
  • @chakra-ui/react: 3.37.0
  • react / react-dom: 19.3.0
  • Node: v22.13.0, macOS (Apple Silicon)

Repro

  1. npx [email protected] my-app --platform cloudflare --use-pnpm --yes
  2. cd my-app && pnpm add @chakra-ui/react @emotion/react
  3. Replace app/page.tsx with:
    typescript
    import { Box } from "@chakra-ui/react";
    
    export default function Page() {
      return <Box>Hello</Box>;
    }
  4. pnpm dev, then curl 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-themes ThemeProvider/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/react and @ark-ui/react (Chakra's underlying primitives) to optimizeDeps.exclude in vite.config.ts silenced a separate "client component dependency is inconsistently optimized" warning for @ark-ui/react internals, but did not fix this crash.
  • pnpm build succeeds completely (all 5 build steps, RSC environment included) and the built Worker serves Chakra pages correctly via wrangler dev --config dist/server/wrangler.json — so this is specific to vinext 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.