Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: A React Element from an older version of React was rendered when using React 19 #580

Closed
3 of 5 tasks
Artur- opened this issue Jun 27, 2024 · 2 comments
Closed
3 of 5 tasks
Labels

Comments

@Artur-
Copy link

Artur- commented Jun 27, 2024

  • Check if updating to the latest version resolves the issue

Environment

  • I am using @preact/signals-core
  • I am using @preact/signals
  • I am using @preact/signals-react

Describe the bug
A simple signal using component

import { signal } from "@preact/signals-react";

const mySignal = signal("world");

export default function BasicSignalView() {
  return <span>Hello: {mySignal}</span>;
}

fails with React 19 rc with

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:

https://github.com/Artur-/react19-signals-tests-babel

npm i --legacy-peer-deps
npm run dev

open http://localhost:5173/

Expected behavior
It should show "Hello: world" like with React 18

  return <span>Hello: {mySignal.value}</span>;

also works fine

@rschristian
Copy link
Member

rschristian commented Jun 27, 2024

As stated in #576, React 19 is not supported by this library.

Please adhere to the peer dependencies rather than ignoring them:

"react": "^16.14.0 || 17.x || 18.x"

Support for 19 will likely come only upon release -- I don't think anyone's going to invest the time to support an rc that might change.

@Artur-
Copy link
Author

Artur- commented Jun 28, 2024

Alright then. I managed to get it working by changing the symbol to use from react.element to react.transitional.element in https://github.com/Artur-/signals/tree/react19, seemingly related to facebook/react#28813. It may not be the full solution for React 19 but at least I can test some things now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants