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

Skip to content

Conversation

Wumpf
Copy link
Member

@Wumpf Wumpf commented Aug 6, 2025

Related

What

.. and use peerDependencies instead of dependencies as it is common practice in the ecosystem.

Tested by building building with dev dependencies pointing to React 18 & 19 as well as a minimal example app using either react 18 or 19 and printing the active react version number:

import WebViewer from "@rerun-io/web-viewer-react";
import React from "react";

function App() {
  console.log("React version:", React.version);

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <WebViewer
        width="800px"
        height="600px"
        rrd="https://app.rerun.io/version/0.24.0/examples/arkit_scenes.rrd"
      />
    </div>
  );
}

export default App;

with either

  "dependencies": {
    "@rerun-io/web-viewer-react": "file:../rerun/rerun_js/web-viewer-react",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },

or

  "dependencies": {
    "@rerun-io/web-viewer-react": "file:../rerun/rerun_js/web-viewer-react",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },

@Wumpf Wumpf self-assigned this Aug 6, 2025
@Wumpf Wumpf added enhancement New feature or request 🕸️ web regarding running the viewer in a browser include in changelog labels Aug 6, 2025
export default class WebViewer extends React.Component {
/** @type {React.RefObject<HTMLDivElement>} */
#parent = createRef();
#parent = /** @type {React.RefObject<HTMLDivElement>} */ (createRef());
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this annotation was the only thing that broke when switching to React 19. The fix is what the ai suggested and it seems to work just fine 🤷

Copy link

github-actions bot commented Aug 6, 2025

Web viewer built successfully. If applicable, you should also test it:

  • I have tested the web viewer
Result Commit Link Manifest
639423e https://rerun.io/viewer/pr/10809 +nightly +main

Note: This comment is updated whenever you push a commit.

@emilk emilk mentioned this pull request Aug 6, 2025
9 tasks
@emilk emilk requested review from grtlr and aedm August 6, 2025 12:19
Copy link
Member

@grtlr grtlr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, but kind of hard to tell which subtleties still lie in Javascript package management...

Thanks for testing for BW-compat!

Copy link
Member

@aedm aedm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

peerDependencies is a nice touch.

@emilk emilk merged commit 07c83f5 into main Aug 6, 2025
35 checks passed
@emilk emilk deleted the andreas/fix-react-compat branch August 6, 2025 13:46
emilk added a commit that referenced this pull request Aug 6, 2025
* Fixes #10736

.. and use `peerDependencies` instead of `dependencies` as it is common
practice in the ecosystem.

Tested by building building with dev dependencies pointing to React 18 &
19 as well as a minimal example app using either react 18 or 19 and
printing the active react version number:

```ts
import WebViewer from "@rerun-io/web-viewer-react";
import React from "react";

function App() {
  console.log("React version:", React.version);

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <WebViewer
        width="800px"
        height="600px"
        rrd="https://app.rerun.io/version/0.24.0/examples/arkit_scenes.rrd"
      />
    </div>
  );
}

export default App;
```

with either
```json
  "dependencies": {
    "@rerun-io/web-viewer-react": "file:../rerun/rerun_js/web-viewer-react",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
```
or
```json
  "dependencies": {
    "@rerun-io/web-viewer-react": "file:../rerun/rerun_js/web-viewer-react",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
```

---------

Co-authored-by: Emil Ernerfeldt <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request include in changelog 🕸️ web regarding running the viewer in a browser
Projects
None yet
Development

Successfully merging this pull request may close these issues.

React 19 compatibility issue with @rerun-io/web-viewer-react
4 participants