fix: avoid ERR_REQUIRE_ESM during reflex export with rx.code_block

[daeunnniii]

Fixes #6054

Solution

Updated the generated Vite configuration to prevent SSR build externalization of
react-syntax-highlighter and its ESM dependency refractor.

This ensures that during reflex export, Vite/Rolldown handles ESM/CJS interop
correctly instead of deferring module resolution to Node.js, which caused
ERR_REQUIRE_ESM failures on Node.js 21+.

The change is scoped to the build/export phase only and does not affect development mode.

---

Changes Made

• Prevented SSR externalization of react-syntax-highlighter during export builds
• Added refractor to the non-externalized dependency list to avoid ESM/CJS conflicts

---

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed ERR_REQUIRE_ESM failure during reflex export when using rx.code_block by configuring Vite to prevent SSR externalization of react-syntax-highlighter and its ESM dependency refractor.

Key Changes:

• Added ssr.noExternal configuration to Vite config template
• Applied only during build phase (config.command === "build"), preserving dev mode behavior
• Ensures Vite handles ESM/CJS interop internally instead of delegating to Node.js runtime

Technical Context:
The issue occurred because react-syntax-highlighter (CJS) depends on refractor (ESM). During SSR builds, Vite externalized these dependencies by default, causing Node.js 21+ to fail when the CJS module tried to require() an ESM module. By adding both packages to noExternal, Vite now bundles them and handles the module format conversion correctly.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The fix is targeted, well-understood, and follows Vite's recommended approach for handling ESM/CJS interop issues. The conditional ensures it only applies during production builds, leaving development mode unchanged. The solution directly addresses the reported error without introducing new dependencies or modifying core logic.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
reflex/compiler/templates.py	5/5	Added SSR noExternal configuration for react-syntax-highlighter and refractor during build to fix ESM/CJS interop issue

Sequence Diagram

sequenceDiagram
    participant User
    participant ReflexExport as reflex export
    participant Vite as Vite Build
    participant RSH as react-syntax-highlighter
    participant Refractor as refractor (ESM)
    
    User->>ReflexExport: Run reflex export
    ReflexExport->>Vite: Trigger npm run export
    
    Note over Vite: config.command === "build"
    
    alt Before Fix (externalized)
        Vite->>RSH: External import (Node.js resolution)
        RSH->>Refractor: require() ESM module
        Refractor-->>RSH: ERR_REQUIRE_ESM
        RSH-->>Vite: Build fails
        Vite-->>User: Export fails
    end
    
    alt After Fix (noExternal)
        Vite->>Vite: Bundle react-syntax-highlighter & refractor
        Note over Vite: Handles ESM/CJS interop internally
        Vite->>RSH: Bundled import
        RSH->>Refractor: Bundled ESM import
        Refractor-->>RSH: Success
        RSH-->>Vite: Success
        Vite-->>User: Export succeeds
    end

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}