Vitest create duplicate module instances in monorepo (Affects React Context)

[jeirebua]

Hi everyone,

I'm working on a pnpm monorepo with the following structure:

.
└── packages/
    ├── common      (@acme/common)  --> Contains a SessionProvider and useSession hook
    ├── user     (@acme/user) --> Uses useSession inside a component
    └── app      --> uses @acme/user and @acme/common 

• SessionProvider is inside @acme/common, and components from both user and app use useSession();
• In Development mode, everything works fine.
• In Vitest, SessionProvider seems to be instatiated twice, and useSession() inside @acme/user package cannot access the session context even though its wrapped in SessionProvider

Minimal Reproducible Code

@acme/common
src/context/SessionProvider.tsx

import { PropsWithChildren, useMemo, useState } from "react";

function SessionProvider({ children }: PropsWithChildren) {
  const [user, setUser] = useState<TSessionContext["data"]>({
    id: 1,
    username: "John Doe",
  });


  return (
    <SessionContext.Provider value={{ user, setUser }}>
      {children}
    </SessionContext.Provider>
  );
}

export default SessionProvider;

@acme/user
src/components/UserProfile.tsx

import { useSession } from "@acme/common";

function UserProfile() {
  const { user } = useSession();

  return (
    <div>
      {user ?.username}
    </div>
  );
}

export default UserProfile;

@acme/app
src/App.tsx

import { useSession, SessionProvider } from "@acme/common";
import { UserProfile } from "@acme/user";

function TestComponent() {
  const { user } = useSession();

  return (
    <div>
      Hello {user ?.username} from test component
    </div>
  );
}

function App() {
  return (
    <SessionProvider>
      <UserProfile />
      <TestComponent />
    </SessionProvider>
  );
}

export default App;

In development mode. Both test component and userprofile gets the value from useSession but in when i test this in vitest only the TestComponent gets the value from useSession() and its says the useSession cannot find the SessionProvider.

What i need help with:

How can i force vitest to use a single instance from @acme/common across app and @acme/user, preventing duplicate session instances?

Any insights or best practice for handling shared React context in a monorepo with vitest would be greatly appreciated! 🚀

[hi-ogawa]

You likely need test.server.deps.inline: ["@acme/common", "@acme/user"], but from the given (hypothetical) description alone, we cannot tell whether this should be needed or not. It would be nice to have a self-contained runnable example as it's missing package.json, tsconfig, vite/vitest config, how packages are built or not built, etc...

[jeirebua]

Hi @hi-ogawa ,

Thanks for the suggestion. I've added the paths on my tsconfig but still no luck.

I have created a monorepo to reproduce the issue

If you try to run the test packages/app/src/__tests__/App.test.tsx you'll see the error

 ❯ src/__tests__/App.test.tsx (1 test | 1 failed) 23ms
   × App component > Renders 22ms
     → Unable to find Session Provider

but when run in dev environment. It's working when you run pnpm dev

If it helps, here is my system info:

packages/app:

  System:
    OS: Linux 5.10 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 5600 6-Core Processor
    Memory: 12.84 GB / 15.60 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
    pnpm: 10.6.5 - ~/.nvm/versions/node/v18.18.2/bin/pnpm
  npmPackages:
    @vitejs/plugin-react-swc: ^3.8.0 => 3.8.1 
    vite: ^6.2.0 => 6.2.2 
    vitest: ^3.0.9 => 3.0.9 

[hi-ogawa]

Can you provide reproduction steps? which command to build packages (if needed) and where to run test?

[jeirebua]

Yes, after cloning the repo

## install dependencies
pnpm install

## build packages
pnpm -r build

## run test
cd packages/app
pnpm test src/__tests__/App.test.tsx

and then you'll see the error

monorepo/packages/app

stdout | src/__tests__/App.test.tsx
************
**SESSION**
************

stdout | src/__tests__/App.test.tsx
************
**SESSION**
************

 ❯ src/__tests__/App.test.tsx (1 test | 1 failed) 20ms
   × App component > Renders 19ms
     → Unable to find Session Provider

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
 FAIL  src/__tests__/App.test.tsx > App component > Renders
Error: Unable to find Session Provider

[hi-ogawa]

I took a look and the issue is mostly same as #7591.
Vitest's cjs in workspace doesn't work out of the box and, in your case, it might be simpler to add your cjs packages to deps.external https://stackblitz.com/edit/github-k8n7qkao?file=packages%2Fapp%2Fvitest.config.ts

  test: {
    server: {
      deps: {
        external: [
          /\/packages\/common\/dist\/index.cjs/,
          /\/packages\/user\/dist\/index.cjs/,
        ]
      },
    },
  }

The alternative is doing the opposite and force mjs to be picked up https://stackblitz.com/edit/github-k8n7qkao-8rcrspsz?file=packages%2Fapp%2Fvitest.config.ts

  test: {
    alias: {
      // pointint to src/index.ts should also work similar
      '@acme/common': path.resolve('../common/dist/index.js'),
      '@acme/user': path.resolve('../user/dist/index.js'),
    },
  },

[jeirebua]

Hi @hi-ogawa,

It works now! This code fixed my problem. Thank you very much for your help!

test: {
    server: {
      deps: {
        external: [
          /\/packages\/common\/dist\/index.cjs/,
          /\/packages\/user\/dist\/index.cjs/,
        ]
      },
    },
  }