Skip to content

reflex export fails with rx.code_block due to ESM/CJS interop in react-syntax-highlighter #6054

@daeunnniii

Description

@daeunnniii

Describe the bug
After upgrading to Reflex 0.8.23, using rx.code_block causes reflex export to fail due to an ESM/CJS interop error originating from react-syntax-highlighter.
This issue does not occur in development mode and only reproduces during the export (production build) step.

Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/refractor/lib/core.js
from .../node_modules/react-syntax-highlighter/dist/cjs/prism-light.js not supported.
    at Object.<anonymous> (.../node_modules/react-syntax-highlighter/dist/cjs/prism-light.js:9:13)
    ...
error: script "export" exited with code 1

To Reproduce
Steps to reproduce the behavior:

  • Code/Link to Repo:
import reflex as rx

def index():
    return rx.code_block(
        "print('hello world')",
        language="python",
    )

app = rx.App()
app.add_page(index)
~$ reflex export

Expected behavior
reflex export should complete successfully when rx.code_block is used, producing a valid production build.

Screenshots
If applicable, add screenshots to help explain your problem.
Image

Specifics (please complete the following information):

  • Python Version: 3.12
  • Reflex Version: 0.8.23
  • Node Version: 22.11.0 (reproduces on Node.js 21 and above)
  • OS: Ubuntu 22.04

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions