React-compiler not working with 'module:@preact/signals-react-transform'

[mendrik]

• 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
• I understand usage changed in v2, and I've followed the React Integration instructions

Describe the bug

plugins: [
		tsconfigPaths(),
		react({
			babel: {
				plugins: [
					['module:@preact/signals-react-transform'],
					['babel-plugin-react-compiler', { transform: 'preact' }]
				]
			}
		})
	] as ViteUserConfig['plugins'],

To Reproduce
React compiler and @preact/signals-react-transform don't play nice together. It doesn't matter in which order they are added to vite config.

Steps to reproduce the behavior:

It seems like there is no reactivity: changes to values in signals don't re-render the component any longer

Expected behavior
Well I would expect them to be disjunct in their functionalities. But it seems one breaks the other.

[rschristian]

Please provide a reproduction as our issue template requires.

What is { transform: 'preact' } meant to do in the config?

Edit: This seems to work.

// app.jsx
import { useSignal } from '@preact/signals-react';

function App() {
    const count = useSignal(0);

    return (
        <button onClick={() => count.value++}>
          count is {count.value % 2 == 0 ? 'even' : 'odd'}
        </button>
    );
}

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        react({
            babel: {
                plugins: [
                    ['module:@preact/signals-react-transform'],
                    ['babel-plugin-react-compiler']
                ]
            }
        })
    ],
});

Hence why repos are required.

[mendrik]

Ok I will try to make a repo, I use static signals outside of my components though, so maybe that makes the difference.

[mendrik]

ok I won't have time to create a repo, let's close it until others run into this

[flotothemoon]

I have the same issue, basically just (with the above standard config):

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

const count = signal(0);

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

export default App;

This won't work when using React Compiler, it doesn't update reactively. Funnily, using count is {count} does work because these updates are patched in directly (bypassing the memoization).

One patch to this problem is using useLiveSignal from the utils to wrap every signal, but that seems cumbersome. It would be great if this worked natively.

[flotothemoon]

Could you re-open the issue @JoviDeCroock if this is still relevant?

[JoviDeCroock]

@flotothemoon It's incredibly rude to tag someone to reopen an issue if you aren't even providing the basic thing why this issue got closed in the first place. A reproduction... If that is happening, are you sure that you are using the Babel plugin?

[flotothemoon]

@flotothemoon It's incredibly rude to tag someone to reopen an issue if you aren't even providing the basic thing why this issue got closed in the first place. A reproduction... If that is happening, are you sure that you are using the Babel plugin?

Sorry if I was unclear/incomplete, the code I included is the reproduction. That's all it takes. (Combined with the standard Vite config above).

So for clarity, here are the two pieces together:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        react({
            babel: {
                plugins: [
                    ['module:@preact/signals-react-transform'],  // <--- SIGNALS TRANSFORM
                    // THE FOLLOWING LINE BREAKS REACTIVITY:
                    ['babel-plugin-react-compiler'] // <--- REACT COMPILER AFTER SIGNALS TRANSFORM 
                ]
            }
        })
    ],
});

// app.jsx
import { signal } from '@preact/signals-react';

const count = signal(0); // <--- GLOBAL SIGNAL

function App() {
    return (
        <button onClick={() => count.value++}>
          count is {count.value} // <--- NOT REACTIVE
        </button>
    );
}

export default App;

The versions are up to date (0.5.2 for @preact/signals-react-transform and 3.2.0 for @preact/signals-react for reference).

[JoviDeCroock]

A code snippet is no reproduction.... either way, I am going to disengage from this

[flotothemoon]

I've put these two files into a StackBlitz here:
https://stackblitz.com/edit/preact-signals-652?file=package.json,vite.config.ts,src%2FApp.tsx&terminal=dev
Press the button, nothing happens. Comment the line with the react compiler out and it works.

Sorry about the confusion, this is a great library and I definitely don't want to bother open source contributors. I was only following this issue and didn't check the issue template (I should have), so I used the same layout #652 (comment) did.

[JoviDeCroock]

I think global signals won't work with the React compiler, if you change that to useSignal then it for instance does work.

[flotothemoon]

Yes, useSignal does work. In some situations it's very nice to use global signals directly.

So not supporting global signals in React Compiler is intended behavior? I didn't know that, I'll shut up then :)

[an-h2]

@JoviDeCroock do we have any plan to support global signal? In my app usecase I need global instead of scoped