react/next typeScript preact signals Managing global app state error

Question

Hello i tried to use this preact global app state based on this documentation but keep getting error and this my first time using useContext i might be wrong in my config so i appriciate if anybody could tell me what i have done wrong.

this is my globalSignals.ts src\signals\globalSignal.ts

// Library
import { signal } from "signals-react-safe";
import { createContext } from "preact";


// Type
// import type * as user from "@/types/user";

export function createAppState() {
    const session = signal({});
    // const userData = signal(null as user.User | null);
    // const listUser = signal(null as user.ArrUser | null);
    
    return { session }
}

export const MyContext = createContext(createAppState());

and this is where i wrap the providers

src\app(dashboard)\layout.tsx

import { ReactNode } from "react";
import Navbar from "./components/Navbar";
import Sidebar from "./components/Sidebar";
import { MyContext, createAppState } from "@/signals/globalSignal";

interface Props {
  children: ReactNode;
}

const DashboardLayout = ({ children }: Props) => {

  return (
    <MyContext.Provider value={createAppState()}>
    <div className="flex flex-col max-h-screen h-screen bg-lighterblue">
      <Navbar />
      <div className="flex flex-auto">
        <Sidebar />
        <div className="ps-10 w-full">
          {children}
        </div>
      </div>
    </div>
    </MyContext.Provider>
  );
};

export default DashboardLayout;

and this is the error that i got

Thank you!

Answer 1

You cannot mix Preact and React, they're different libraries and have different internals.

Use createContext from React, i.e.:

// Library
import { signal } from "signals-react-safe";
-import { createContext } from "preact";
+import { createContext } from 'react';