-
Notifications
You must be signed in to change notification settings - Fork 538
Description
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:
- 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
- Install @rerun-io/web-viewer-react:
npm install @rerun-io/web-viewer-react
- 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> ); }
- Start the development server with
npm run dev
- 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.