React-Signal text node binding not working when "@preact/signals" is imported

[gutentag2012]

The Code

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

const someSignalFromALibrary = signal(0)
const count = signalReact(0)

function App() {
return (
    <button
      type="button"
      onClick={() => {
        count.value += 1;
      }}
    >
      count is {count}
    </button>
  );
}

Environment

I am using vite and the babel transform plugin within the react babel config of vite.

• "@preact/signals-react-transform": "^0.3.0",
• "@preact/signals": "^1.2.2",
• "@preact/signals-react": "^2.0.0",
• "vite": "^5.0.8",
• "@vitejs/plugin-react": "^4.2.1",
• "react": "^18.2.0",
• "react-dom": "^18.2.0",

The Issue

When running the provided code the runtime error Uncaught TypeError: Cannot read properties of undefined (reading '__H') occurs. This is not the case when either:

1. Removing the import from @preact/signals or
2. Using an explicit binding for the count count is {count.value}

Notes

It is enough to have an import "@preact/signals" somewhere in the imports to result in this behavior, so there is probably some side effect to the import, that results in this behavior. I also tried importing the react signals package in a different file that is loaded before but that also does not resolve the issue.

[XantreDev]

@preact/signals - for preact @preact/signals-react - for react You can use only one at time

[rschristian]

Yep, please do read the instructions: https://github.com/preactjs/signals?tab=readme-ov-file#installation & https://github.com/preactjs/signals/blob/main/packages/react/README.md#react-integration