[PR #155] [MERGED] fix: pre-bundle react/jsx-runtime to prevent CJS-in-browser errors #355

New issue

Closed

opened 2026-05-06 12:39:23 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 12:39:23 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/155
Author: @FredKSchott
Created: 2/27/2026
Status: ✅ Merged
Merged: 2/28/2026
Merged by: @southpolesteve

Base: main ← Head: fix/prebundle-jsx-runtime

📝 Commits (1)

e3241b1 fix: pre-bundle react/jsx-runtime to prevent CJS-in-browser errors

📊 Changes

1 file changed (+9 additions, -5 deletions)

View changed files

📝 packages/vinext/src/index.ts (+9 -5)

📄 Description

Summary

Adds react/jsx-runtime and react/jsx-dev-runtime to optimizeDeps.include in the client environment config

Problem

Vite's dependency scanner can miss react/jsx-runtime during initial crawl when entry points are virtual modules (as vinext uses). When this happens, the raw CJS file is served to the browser, producing:

SyntaxError: The requested module '/node_modules/react/jsx-runtime.js' does not provide an export named 'jsx'

This affects all JSX in the app — user components and vinext shims alike.

Fix

Explicitly listing these modules in optimizeDeps.include ensures Vite always pre-bundles them into proper ESM. This is the same pattern already used for react, react-dom, and react-dom/client.

This is the correct root-cause fix for #25, superseding the approach in #45 and #136 which worked around the issue by converting individual shim files from JSX to React.createElement. That approach only fixed vinext's own shims while leaving user code broken.

Fixes #25

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/155 **Author:** [@FredKSchott](https://github.com/FredKSchott) **Created:** 2/27/2026 **Status:** ✅ Merged **Merged:** 2/28/2026 **Merged by:** [@southpolesteve](https://github.com/southpolesteve) **Base:** `main` ← **Head:** `fix/prebundle-jsx-runtime` --- ### 📝 Commits (1) - [`e3241b1`](https://github.com/cloudflare/vinext/commit/e3241b13736eff51dad864515c9f53676b769d4e) fix: pre-bundle react/jsx-runtime to prevent CJS-in-browser errors ### 📊 Changes **1 file changed** (+9 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/index.ts` (+9 -5) </details> ### 📄 Description ## Summary - Adds `react/jsx-runtime` and `react/jsx-dev-runtime` to `optimizeDeps.include` in the client environment config ## Problem Vite's dependency scanner can miss `react/jsx-runtime` during initial crawl when entry points are virtual modules (as vinext uses). When this happens, the raw CJS file is served to the browser, producing: ``` SyntaxError: The requested module '/node_modules/react/jsx-runtime.js' does not provide an export named 'jsx' ``` This affects all JSX in the app — user components and vinext shims alike. ## Fix Explicitly listing these modules in `optimizeDeps.include` ensures Vite always pre-bundles them into proper ESM. This is the same pattern already used for `react`, `react-dom`, and `react-dom/client`. This is the correct root-cause fix for #25, superseding the approach in #45 and #136 which worked around the issue by converting individual shim files from JSX to `React.createElement`. That approach only fixed vinext's own shims while leaving user code broken. Fixes #25 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>