Jotai breaks on Expo project but not on web project in mono-repo

[MOES-Media]

Bug Description

I have a simple yarn berry monorepo (yarn workspaces) with following structure:

.
├── apps
│   ├── web
│       ├── pages
│           ├── LoginPage.tsx
│   └── mobile
│       ├── app
│           ├── (auth)
│               ├── index.tsx
├── packages
│   ├── features
│       ├── src
│           ├── Login.tsx
│       ├── package.json
└── package.json

so the apps both have a dependency on the features package and use the Login component.
The Login component has a render prop to render a web version or a react-native version of the page component and looks like this:

import { oAuthService } from "@k9-advance/services";
import { useAtom, useSetAtom } from "jotai/react";
import { FC, ReactElement, useEffect } from "react";
import { loginDataAtom, loginErrorsAtom, loginPendingAtom } from "../state";

interface IEmailPasswordFormValues {
  email: string;
  password: string;
}

interface IAuthPageProps {
  onFormSubmit: (values: IEmailPasswordFormValues) => void;
  initialValues: IEmailPasswordFormValues;
  formButtonLabel: string;
  serverError: string | null;
  isFormPending: boolean;
}

interface ILoginUseCaseProps {
  render: (props: IAuthPageProps) => ReactElement;
}

export const LoginUseCase: FC<ILoginUseCaseProps> = ({ render }) => {
  const setLoginValues = useSetAtom(loginDataAtom);
  const [loginErrors, setLoginErrors] = useAtom(loginErrorsAtom);
  const [loginPending, setLoginPending] = useAtom(loginPendingAtom);

  const onLogin = (values: IEmailPasswordFormValues) => {
    oAuthService.login({
      ...values,
      onLoginSuccess: setLoginValues,
      onLoginFailure: (err) =>
        err ? setLoginErrors(err.message) : setLoginErrors(null),
      onLoginPending: setLoginPending,
    });
  };

  useEffect(() => {
    setLoginErrors(null);
  }, [setLoginErrors]);

  const initialValues: IEmailPasswordFormValues = {
    email: "",
    password: "",
  };

  return (
    <>
      {render({
        serverError: loginErrors,
        onFormSubmit: onLogin,
        initialValues,
        formButtonLabel: "Login",
        isFormPending: loginPending,
      })}
    </>
  );
};

and is being used in the native app like this:

import { Link } from "@/components/navigation";
import {AuthPage} from "./auth";
import { OAuth } from "@k9-advance/features";

const SignUpSwitch = () => (<Link href="/(auth)/signup">No account? Create one now.</Link>)

const Login = () => {
  return (
    <OAuth.LoginUseCase 
      render={({ 
        onFormSubmit,
        initialValues,
        formButtonLabel,
        serverError,
        isFormPending
      }) => 
          <AuthPage 
            onFormSubmit={onFormSubmit}
            initialValues={initialValues}
            formButtonLabel={formButtonLabel}
            isFormPending={isFormPending}
            serverError={serverError}
            switcher={<SignUpSwitch />}
          />}   
    />);
};

export default Login;

in the web app it's being used like this:

import { OAuth } from "@k9-advance/features";
import { Link } from "react-router-dom";
import { AuthPage } from "./AuthPage";

const SignUpSwitch = () => (
  <Link to="../signup" relative="path">
    No account? Create one now.
  </Link>
);

export const LoginPage = () => {
  return (
    <OAuth.LoginUseCase
      render={({
        onFormSubmit,
        initialValues,
        formButtonLabel,
        serverError,
        isFormPending,
      }) => (
        <AuthPage
          serverError={serverError}
          onFormSubmit={onFormSubmit}
          initialValues={initialValues}
          formButtonLabel={formButtonLabel}
          switcher={<SignUpSwitch />}
          isFormPending={isFormPending}
        />
      )}
    />
  );
};

In the web the component renders correctly, however in the mobile app I get the following exception:

Cannot read property 'useContext' of null

with callStack:

¬ useContext (react.development.js)
¬ useStore (react.js)
¬ useSetAtom (react.js)
¬ LoginUseCase(24:36)

I am using Expo with typedRoutes and have placed a <Provider> in the top _layout.tsx file but this didn't help.
I tried moving jotai from a peerDependency to a dependency in the features package and back and even placed a above the render function, but up untill now I still get the Cannot read property useContext of null.
I can't put the code in a public repo, but if you ping me I can invite you to the private repo and give you access to the codebase.
Any idea what is going on? Maybe I missed something with the setup of my project? but to me it seems this is jotai related.

Reproduction Link

https://github.com/MOES-Media-org/k9-advance-client

[MOES-Media]

when I replace the contents of the index.ts file in apps/mobile with this:

import { Link } from "@/components/navigation";
import { AuthPage } from "./auth";
import { OAuth } from "@k9-advance/features";
import { useAtom, useSetAtom } from "jotai";
import { useEffect } from "react";
import { IEmailPasswordFormValues } from "@/forms/EmailPasswordForm";
import {
  loginDataAtom,
  loginErrorsAtom,
  loginPendingAtom,
} from "./login.atoms";

const SignUpSwitch = () => (
  <Link href="/(auth)/signup">No account? Create one now.</Link>
);

const Login = () => {
  const setLoginValues = useSetAtom(loginDataAtom);
  const [loginErrors, setLoginErrors] = useAtom(loginErrorsAtom);
  const [loginPending, setLoginPending] = useAtom(loginPendingAtom);

  const onLogin = (values: IEmailPasswordFormValues) => {
    console.log({
      ...values,
      onLoginSuccess: setLoginValues,
      onLoginFailure: (err: Error) =>
        err ? setLoginErrors(err.message) : setLoginErrors(null),
      onLoginPending: setLoginPending,
    });
  };

  useEffect(() => {
    setLoginErrors(null);
  }, [setLoginErrors]);

  const initialValues: IEmailPasswordFormValues = {
    email: "",
    password: "",
  };

  return (
    <AuthPage
      onFormSubmit={onLogin}
      initialValues={initialValues}
      formButtonLabel={"Login"}
      isFormPending={loginPending}
      serverError={loginErrors}
      switcher={<SignUpSwitch />}
    />
  );
};

export default Login;

it works just fine, is this maybe because there are no direct references to the atoms anywhere in the app's code, but only in the features package's code?

[MOES-Media]

This had nothing to do with Jotai, there was a stray react devdependency that caused 2 versions to be loaded.