preactjs / signals

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

Component does not rerender after vite build #508

Closed taorepoara closed 9 months ago

taorepoara commented 9 months ago

I made an SPA with Preact (not React) and it's based on signals.

Local development works fine, but when building the projet with vite build the components do not re-render after signal change.

I tried to add log in effet function to check if the signal changes and it works fine after build, but not the render.

Here is my vite config file:

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [preact()],
});

And here is a minimalist example:

import { effect, signal } from "@preact/signals";
import { Component } from "preact";

export const isAdmin = signal(false);

effect(() => {
    console.log("isAdmin changed", isAdmin.value);
});

setTimeout(() => {
    isAdmin.value = true;
}, 1000);

export class Admin extends Component {
    render() {
        console.log("Admin render", isAdmin.value);
        if (isAdmin.value) return "Admin";
        return "Not admin";
    }
}
XantreDev commented 9 months ago

Probably reactivity is not working with class components, you should use function components if you want it to rerender on signal changes

taorepoara commented 9 months ago

It does not work better with this version:

import { effect, signal } from "@preact/signals";

export const isAdmin = signal(false);

effect(() => {
    console.log("isAdmin changed", isAdmin.value);
});

setTimeout(() => {
    isAdmin.value = true;
}, 1000);

export function Admin() {
    console.log("Admin render", isAdmin.value);
    if (isAdmin.value) return "Admin";
    return "Not admin";
}
XantreDev commented 9 months ago

Strange. Which preact, preact/signals versions do you use?

taorepoara commented 9 months ago

preact: 10.19.3 @preact/signals: 1.2.2 @preact/preset-vite: 2.8.1

I'm running the vite build with bun. I'll try with npm.

taorepoara commented 9 months ago

I'm running the vite build with bun. I'll try with npm.

Not better

taorepoara commented 9 months ago

Not better

My bad ! I made a mistake in my test. It works fine with npm. I'll check if there is version diffs, because I don't understand why it would affect the build.

taorepoara commented 9 months ago

It seems to be fixed in preact 10.19.4

Thanks for your help !