TypeError: Cannot set properties of undefined (setting 'v')

[rempas]

I'm having the following code:

File: src/text.tsx

import { Signal } from "@preact/signals";

export const text = {
   "def_en": "Default english text",

   "def_el": "Προεπιλεγμένο ελληνικό κείμενο"
}

export const body_text = Signal(text["def_en"])

File: components/text.tsx

import { body_text } from './../src/text.tsx'

export default function Text() {
   return <div id="text" dangerouslySetInnerHTML={{ __html: body_text.value }}
      class="leading-8 absolute text-center top-40 left-[40vw]
             max-lg:calc(1rem + 30vw)"/>;
}

And when I try to run the server, I'm getting the following error:

error: Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'v')
    at s (https://esm.sh/v135/@preact/signals-core@1.5.1/X-ZS8q/denonext/signals-core.mjs:2:778)
    at file:///home/rempas/Projects/FreshPage/src/text.tsx:9:26

I know that the problems has to do with the Signal but, I've searched everywhere to learn how they work and what I could have done wrong, and I can't see what I do wrong. The problem is not there if I don't import and use the signal and the components/text.tsx module.

[rschristian]

You want signal, lower cased.

Signal is the class, i.e., new Signal(text["def_en"]) would be needed.

[rempas]

They have both a function and a class? Weird, I didn't even notice it...

Thank you so much for the help! Have a beautiful day!

[rschristian]

Signal (the class) is mostly meant for internal usage, we don't expect many users to directly instantiate new signals with it. However, signal is quite literally defined as such:

export function signal(val) {
    return new Signal(val);
}

So signal() is really just a super simple wrapper function.

As for why we even expose the class, it's so you can use instanceof like so to easily determine if a value is a signal or not:

if (signalMaybe instanceof Signal) {
    // do something with the signal
} else {
    // wasn't a signal, do something else
}

[rempas]

signal is quite literally defined as such:

export function signal(val) {
    return new Signal(val);
}

As for why we expose the class, it's so you can use instanceof like so:

if (signalMaybe instanceof Signal) {
    // do something with the signal
}

Thank you so much! As a beginner in both Fresh, Preact and Typescript, those kinds of little examples are very sweet and helpful! ❤️

[rschristian]

No problem! Glad it's helpful