There is some issues with signals in my nextjs project

Question

"use client";
import React, { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Route, routeCollection } from "../../data/route";
import { IonIcon } from "@ionic/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  linkAppearAnimationVariant,
  linkContainerAnimationVariants,
  navScreenVariant,
} from "../../animation/navbarVariants";
import { signal } from "@preact/signals";

const isNavOpen = signal<boolean>(false);

const MobileNav = () => {
  // const [isNavOpen, setIsNavOpen] = useState(false);
  const pathname = usePathname();

  return (
    <>
      {!isNavOpen && (
        <div
          className="fixed right-12 top-12 md:hidden text-neutral-50"
          onClick={() => {
            isNavOpen.value = true;
          }}
        >
          Open
        </div>
      )}
      <AnimatePresence>
        {isNavOpen && (
          <motion.div
            variants={navScreenVariant}
            initial="initial"
            animate="animate"
            exit="exit"
            className="w-full h-full flex flex-col justify-between absolute origin-top bg-main backdrop-blur-md md:hidden text-neutral-50 p-8"
          >
            <motion.div className="flex justify-between p-4 items-center">
              <motion.p className="font-bold text-lg">Ayush</motion.p>
              <motion.p
                onClick={() => {
                  isNavOpen.value = false;
                }}
              >
                Close
              </motion.p>
            </motion.div>
            <motion.div
              variants={linkContainerAnimationVariants}
              initial="initial"
              animate="animate"
              exit="initial"
              className="flex flex-col justify-between items-center gap-4"
            >
              {routeCollection.map((eachRoute, index) => (
                <div className="overflow-hidden">
                  <LinkRender
                    key={index}
                    eachRoute={eachRoute}
                    pathName={pathname}
                    closeTab={() => {
                      isNavOpen.value = false;
                    }}
                  />
                </div>
              ))}
            </motion.div>
            <motion.a
              href="mailto:[email protected]"
              className="underline underline-offset-2 text-center"
            >
              Contact Me
            </motion.a>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

const LinkRender = ({
  eachRoute,
  pathName,
  closeTab,
}: {
  eachRoute: Route;
  pathName: string;
  closeTab: () => void;
}) => {
  return (
    <motion.div variants={linkAppearAnimationVariant} onClick={closeTab}>
      <Link href={eachRoute.address}>
        <motion.div
          className={`flex gap-2 items-center font-bold text-md ${
            pathName === eachRoute.address ? "text-extraLight" : ""
          }`}
        >
          <IonIcon icon={eachRoute.iconText}></IonIcon>
          <span>{eachRoute.name}</span>
        </motion.div>
      </Link>
    </motion.div>
  );
};

export default MobileNav;

this is above code is for one of my component on next js
now the issue is on this block of code

{!isNavOpen && (
        <div
          className="fixed right-12 top-12 md:hidden text-neutral-50"
          onClick={() => {
            isNavOpen.value = true;
          }}

only this piece of code is throwing error on this line

isNavOpen.value = true;

on other places it's not throwing error and I am unable to use the cancel button

I am trying the preact/signals for the first time

I tried to this piece of codes

const isNavOpen = signal<boolean>(false) as {value: boolean};

also I tried this one too separating the whole function

const stateChange_isNavOpen = (newState: boolean) => {
  isNavOpen.value = newState;
};

now it is not throwing any errors but the whole functionality is not working

Answer 1

You're using the Preact signal bindings, rather than React's.

Please follow the installation instructions and use @preact/signals-react if you're attempting to use them in React.