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

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

Environment:

Nextjs14
AppRouter
src folder
Tailwindcss

Code:

import { GeistSans, GeistMono } from 'geist/font'
import { signal } from '@preact/signals-react'
import './globals.css'

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

export const Register = () => {
  return (<>
    <dialog open={toOpen.value}>
      <p>Create a new account</p>
    </dialog>
  </>
  )
}

standard boilerplate code follows

Expected:

At least the app to load, instead receiving the error described.

Tried all approaches possible, even the documentation examples within my environment.

About this issue

Original URL
State: open
Created 8 months ago
Comments: 17 (1 by maintainers)

Most upvoted comments

Or just add "use client" at the top of the file that imports the signal.

zeropaper on Nov 16, 2023

Try the library I just published on npm (signals-react-safe), it fixes the re-rendering issue.

JonAbrams on Nov 6, 2023

I don’t think there’s any need for signals to hook into React for SSR, since the state will never change server-side. Therefore, it should be enough (🤞) for signals-react to not call installJSXHooks: https://github.com/preactjs/signals/blob/main/packages/react/runtime/src/auto.ts#L339

Unfortunately, I don’t know enough about either Signal’s or Next’s codebase to make that happen.

To help people googling find this issue, here’s my error: TypeError: Cannot set property jsx of [object Module] which has only a getter

Related: vercel/next.js/issues/45054

Added a workaround to that issue.

JonAbrams on Nov 5, 2023

Actually, it turns out you’re not supposed to use hooks in server components. Instead, access the signal and/or it’s value directly in the server component. Since server components don’t re-render, it should be safe.

In the future, please raise an issue with the signals-react-safe library here.

e.g.

import { language } from '../mySignals';

const Page = () => {
    const t = translate(languages[language.value]);

    return (
        <section>
             {t('CREATE_EVENT')}
        </section>
    )
}

JonAbrams on Nov 17, 2023

it seems like you guys seeing this error at the server side component, but I use it literally at client side components but not with the props drilling way, just the export and import way, and the error occurs…

QingjiaTsang on Nov 29, 2023

So basically don’t use signals in nextjs. Sad

ghost2023 on Nov 4, 2023