这是indexloc提供的服务,不要输入任何密码
Skip to content

Duplicate identifier error when using custom React component (0.8.16) #5923

@salomaop

Description

@salomaop

Describe the bug
Since version 0.8.8, Reflex fails to build projects that include a custom React component (via rx.NoSSRComponent or rx.Component) — throwing a syntax error about a duplicate identifier during the production build.

This issue did not occur in version 0.8.7 and only started after upgrading to 0.8.8.

To Reproduce

  1. Create a custom JS component and wrap it in a Reflex class:
    class UnicoSDK(rx.NoSSRComponent):
    library = "/public/components/unico_sdk_component.jsx"
    tag = "WidgetUnico"
    lib_dependencies: list[str] = ["idpay-b2b-sdk"]

    token: rx.Var[str]
    transactionId: rx.Var[str]
    env: rx.Var[str]
    callback: rx.EventHandler[lambda e: [e]]

  2. Inside the JSX file, define the component normally:
    export default function WidgetUnico({ token, transactionId, env, callback }) {
    useEffect(() => {
    (async () => {
    const mod = await import("idpay-b2b-sdk");
    const sdk = mod?.IDPaySDK || mod?.default?.IDPaySDK || mod;
    sdk.init({ type: "IFRAME", env });
    sdk.open({ transactionId, token, onFinish: callback });
    })();
    }, [token, transactionId, callback]);

    return <div id="unico-container" style={{ width: 400, height: 400 }} />;
    }

  3. Observe the error:
    SyntaxError: Identifier 'WidgetUnico' has already been declared.
    at /.../.web/app/routes/._index.jsx:13:6

  • Code/Link to Repo:

Expected behavior
A clear and concise description of what you expected to happen.

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

Specifics (please complete the following information):
• Reflex version: 0.8.16
• Python version: 3.14
• OS: macOS 15.7 (M1 Pro)
• Build tool: Bun 1.3.0, Node 24.5.0
• Deployment: Docker
• Deployment: Docker

Additional context
• The issue seems related to how Reflex injects component imports into the generated .web/app/routes/*.jsx files.
• The generated file declares the component twice :
import WidgetUnico from "$/public/js/unico_sdk_component.jsx"
const WidgetUnico = ClientSide(lazy(() => import('$/public/js/unico_sdk_component.jsx')))

Temporary workaround
Downgrading to Reflex 0.8.7 avoids the problem — the component builds and works normally.

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