Thanks to visit codestin.com
Credit goes to github.com

Skip to content

React 19 compatibility issue with @rerun-io/web-viewer-react #10736

@chensid

Description

@chensid

Describe the bug
When using @rerun-io/[email protected] with React 19.x, the application throws a version conflict error preventing the WebViewer component from rendering. This happens because the package has a direct dependency on react: "^18.2.0", creating a conflict when the host project uses React 19.

Error message:

Uncaught Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new React project with React 19.x:
    npm create vite@latest my-rerun-app -- --template react-ts
    cd my-rerun-app
    npm install react@^19.1.0 react-dom@^19.1.0
  2. Install @rerun-io/web-viewer-react:
    npm install @rerun-io/web-viewer-react
  3. Add the WebViewer component to your App.tsx:
    import WebViewer from "@rerun-io/web-viewer-react";
    
    function App() {
      return (
        <div style={{ width: "100vw", height: "100vh" }}>
          <WebViewer
            width="800px"
            height="600px"
            rrd="https://app.rerun.io/version/0.23.4/examples/arkit_scenes.rrd"
          />
        </div>
      );
    }
  4. Start the development server with npm run dev
  5. See the React version conflict error in browser console

Expected behavior
The WebViewer component should work seamlessly with React 19.x, as React generally maintains backward compatibility for library components. The component should render without any version conflicts.

Screenshots
The error appears in the browser console as a React runtime error, preventing the WebViewer from loading.

Backtrace

Uncaught Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.

Desktop (please complete the following information):

  • OS: macOS (also affects Windows and Linux)

Rerun version
@rerun-io/web-viewer-react version: 0.24.0

Additional context
Root cause: @rerun-io/[email protected] has a direct dependency on react: "^18.2.0", creating this dependency tree conflict:

├── [email protected] (host project)
└── @rerun-io/[email protected]
    └── [email protected] (conflicting version)

Current workaround: Downgrade to React 18.x:

{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Suggested fix: Update the package to use React as a peer dependency instead:

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  }
}

This affects developers who want to use React 19's new features alongside Rerun's WebViewer component.

Metadata

Metadata

Assignees

Labels

📺 re_vieweraffects re_viewer itself🕸️ webregarding running the viewer in a browser🪳 bugSomething isn't working

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions