useSignals not working with Astro js

[ajomuch92]

When you install and use this package(@preact/signals-react) on a React component, and this component is within an Astro component, doesn't work, I mean, the reactivity doesn't trigger. Do you have a workaround or can take a look?

[jesseagleboy]

Did you use an Astro directive like client:load on the React Component that is placed within the Astro component? The Javascript won't load without the directive.

Template Directives

[ajomuch92]

Yes, I used it and doens't work

[rschristian]

Please provide a reproduction.

[XantreDev]

@ajomuch92 do you use babel plugin for signals?

[ajomuch92]

No, I'm not using that plugin. I will create a repo or sandbox to show you how is my configuration

[ajomuch92]

Here you will find a repo with the basic configuration using Astro + React + Signals

[rschristian]

You're not calling useSignals() or the using the Babel plugin. Gotta use one.

Please read the docs: https://github.com/preactjs/signals/tree/main/packages/react#react-integration

Edit: You also shouldn't be using signal inside of a component. This is not a stable reference and will be recreated upon every render. Again, the docs

[ajomuch92]

Even using useSignal is not working, and Astro uses esbuild instead of Babel, any idea?

[rschristian]

You're still not using useSignals(): https://github.com/preactjs/signals/tree/main/packages/react#usesignals-hook

It, or the Babel plugin, must be used.