Skip to content

fix(dev): optimize Chakra UI barrel imports - #3317

Merged
james-elicx merged 1 commit into
mainfrom
codex/fix-chakra-dev-rsc
Sep 20, 2026
Merged

james-elicx merged 1 commit into
mainfrom
codex/fix-chakra-dev-rsc

Conversation

@james-elicx

Copy link
Copy Markdown
Member

Summary

  • include @chakra-ui/react in vinext's default barrel-import optimization
  • add a Cloudflare worker-backed dev regression reproducing Chakra 3.37's root-barrel/client-module shape
  • verify the RSC transform targets the direct "use client" module instead of evaluating the root barrel under react-server

Root cause

Chakra UI v3 publishes a directive-less root barrel that re-exports client modules. In the Cloudflare-backed dev runner, importing Box from that barrel allowed its createContext() path to execute with the react-server runtime, where createContext is unavailable. Production builds already avoided the failure through static analysis.

Next.js supports this class of package through experimental.optimizePackageImports; vinext's existing equivalent already handles Radix and other barrels. Adding Chakra to vinext's compatibility defaults routes named imports directly to Chakra's client-marked module.

Validation

  • red before fix: worker-backed dev request returned 500 with (0, import_react_react_server.createContext) is not a function
  • vp test run tests/optimize-imports-integration.test.ts tests/optimize-imports.test.ts (44 passed)
  • vp check packages/vinext/src/plugins/optimize-imports.ts tests/optimize-imports-integration.test.ts
  • vp run vinext#build
  • independent reviews: two clean NO FINDINGS verdicts

Closes #3316

@james-elicx

Copy link
Copy Markdown
Member Author

/bigbonk review for issues

@pkg-pr-new

pkg-pr-new Bot commented Sep 17, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vinext/cloudflare

npm i https://pkg.pr.new/@vinext/cloudflare@3317

create-vinext-app

npm i https://pkg.pr.new/create-vinext-app@3317

@vinext/types

npm i https://pkg.pr.new/@vinext/types@3317

vinext

npm i https://pkg.pr.new/vinext@3317

@cloudflare/workers-response-store

npm i https://pkg.pr.new/@cloudflare/workers-response-store@3317

commit: 6babee3

@ask-bonk

ask-bonk Bot commented Sep 17, 2026

Copy link
Copy Markdown
Contributor

LGTM!

github run

@github-actions

Copy link
Copy Markdown
Contributor
Example Preview Production Original
app-router-cloudflare preview production
pages-router-cloudflare preview production
app-router-playground preview production original
realworld-api-rest preview production
nextra-docs-template preview production
benchmarks preview production
hackernews preview production original
response-store-demo preview production
static-export preview production
web preview production

@github-actions

Copy link
Copy Markdown
Contributor

Performance benchmarks

Compared 6babee3 against base e97de29 using alternating same-runner rounds. Next.js was unchanged and skipped.

0 improved · 0 regressed · 6 within ±1.5%

Scenario Framework Baseline Current Change
Client bundle size (gzip) vinext 142.2 KB 142.2 KB ⚫ -0.0%
Client entry size (gzip) vinext 129.6 KB 129.6 KB ⚫ -0.0%
Dev server cold start vinext 3.18 s 3.14 s ⚫ -1.3%
Production build time vinext 3.73 s 3.71 s ⚫ -0.6%
RSC entry closure size (gzip) vinext 121.0 KB 121.0 KB ⚫ -0.0%
Server bundle size (gzip) vinext 218.3 KB 218.3 KB ⚫ -0.0%

View detailed results and traces

🟢 improvement · 🔴 regression · ⚫ change below 1.5% · paired base/head

@james-elicx
james-elicx marked this pull request as ready for review September 17, 2026 22:24
@james-elicx
james-elicx merged commit fad7d4a into main Sep 20, 2026
76 checks passed
@james-elicx
james-elicx deleted the codex/fix-chakra-dev-rsc branch September 20, 2026 21:24
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.

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

1 participant