Theo's Typesafe Cult•14mo ago

Preact signals in Nextjs14 + AppRouter

I was trying to use signals within the setup above but either the signal updates but no re-rendering happens or I just get a server error.

'use-client'
import Image from 'next/image'
import { signal } from '@preact/signals-react'

const toOpen = signal(false)
const signalChange = () => { toOpen.value = true ; console.log(toOpen)}

export default function Home() {
  return (<> <p>The current status is: {String(toOpen.value)}</p><button onClick={signalChange }>Change status</button></>)

'use-client'
import Image from 'next/image'
import { signal } from '@preact/signals-react'

const toOpen = signal(false)
const signalChange = () => { toOpen.value = true ; console.log(toOpen)}

export default function Home() {
  return (<> <p>The current status is: {String(toOpen.value)}</p><button onClick={signalChange }>Change status</button></>)

The server error:

Server Error
Error: Cannot set property createElement of [object Module] which has only a getter

Server Error
Error: Cannot set property createElement of [object Module] which has only a getter

2 Replies

peterkyle01•14mo ago

U need to use the signal useEffect i think its called effect to render when signal changes the if you want to toggle signal true and false you can do: toOpen.value = !toOpen.value

DraëcalOP•14mo ago

The problem is that is throwing a server error that prevents the app to load just by defining the signal

Gaming

Programming

Preact signals in Nextjs14 + AppRouter