preactjs / signals

Manage state with style in every framework
https://preactjs.com/blog/introducing-signals/
MIT License
3.62k stars 88 forks source link

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

Closed Artur- closed 1 week ago

Artur- commented 1 week ago

Environment

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 commented 1 week ago

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

Please adhere to the peer dependencies rather than ignoring them: https://github.com/preactjs/signals/blob/931404e96338e120464b73e522148389e38eeb2b/packages/react/package.json#L71

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- commented 1 week ago

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 https://github.com/facebook/react/pull/28813. It may not be the full solution for React 19 but at least I can test some things now.