CODEWITHSUNDEEP
reactjsvitepreact-signal
Calin Ianchis
Calin Ianchis

Reputation: 61

@preact/signals-react not working in Vite application

I have a basic application in Vite.
Why can't I type in the input field?

import React from "react";
import { signal, computed } from "@preact/signals-react";

const name = signal<string>("");
const disabled = computed<boolean>(() => name.value.trim() === "");

const Welcome = () => {
  return (
    <div>
      <input value={name.value} onInput={e => (name.value = e.currentTarget.value)} />
      <p>Name: {name.value}</p>
      <p>Disabled: {disabled.value ? "true" : "false"}</p>
    </div>
  );
};

export default Welcome;

Upvotes: 2

Views: 1349

Answers (1)

Dixit Bafna
Dixit Bafna

Reputation: 21

Please add the following in vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

Refer - https://www.npmjs.com/package/@preact/signals-react

Upvotes: 2

Related Questions