convex auth fails with react native

[peak bolt]

While trying to resolve module @convex-dev/auth/providers/Password from file /home/xxxx/projects/gysst/app/convex/auth.ts, the package /home/xxxx/projects/gysst/app/node_modules/@convex-dev/auth/providers/Password/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/home/xxxx/projects/gysst/app/node_modules/@convex-dev/auth/dist/providers/Password/index.js. Indeed, none of these files exist:

[quick heron]

Hi @peak bolt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

This error is a known issue when using Convex Auth with React Native (Expo), specifically with the Password provider. The root cause is that the module resolution is failing because the package's main field points to a file that does not exist. This is related to how the exports field in the package is being ignored or not handled correctly by Metro (the React Native bundler) or your project's TypeScript configuration.

Key points and solutions from the knowledge sources:

1. Module Resolution Issues:
   • The error is often due to Metro or TypeScript not respecting the exports field in the package, leading it to look for files that aren't present. This is a common pain point with Expo and monorepo setups, especially when using packages like @convex-dev/auth that rely on modern package export fields.
   • Trusted Support Staff have noted that this is a known issue and that @convex-dev/auth only provides node10-style resolutions for the minimum set of exports required for Expo. They recommend using "moduleResolution": "bundler" in your tsconfig.json to help TypeScript resolve modules correctly in Expo projects. This has resolved similar issues for other users, though Expo's default is "node" and there may be edge cases to watch for.
     See discussion

2. Workarounds and Best Practices:

   • Ensure you are not importing server-side code or helpers into your React Native app. Only import from convex/_generated or client-specific code. Accidentally importing server code can cause Metro to try to resolve server-only dependencies, leading to errors.
     See discussion
   • If you are in a monorepo, double-check that your frontend does not import anything from the backend except for types or generated API code.
     See discussion

3. Password Provider Specifics:

   • The Password provider is supported, but you must ensure your dependencies are installed correctly. Sometimes, missing dependencies like oslo can also cause similar errors.
     See discussion

4. Example Repo:

   • There is a working example of Convex Auth with Expo here: expo-convex-auth example repo. Reviewing its configuration (especially tsconfig.json and how dependencies are structured) may help resolve your issue.
     See discussion

Summary of steps to try:

• Set "moduleResolution": "bundler" in your tsconfig.json.
• Ensure you are not importing server-side code into your React Native app.
• Double-check that all required dependencies (including oslo) are installed.
• Refer to the expo-convex-auth example repo for a working setup.

If these steps do not resolve the issue, it may be a limitation or bug in the current version of @convex-dev/auth or your bundler. In that case, consider following or commenting on the related GitHub issue for updates, as the Convex team is aware and working on improvements.

References:
Discord: convex auth on expo password provider error
Discord: Got a module not few TS errors from @convex-dev/auth
Discord: [Convex Auth]: Monorepo Expo app: "Unable to resolve @convex-dev/auth/server"
Discord: Error(s) in expo

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: