Monorepo with React Native + Next.js

[cNille]

Hello 👋
We built a nextjs website with trpc and it has worked wonderful 🙌 Now we're migrating the website to react-native and have setup a monorepo with yarn workspace and lerna to keep backend in nextjs, but have the frontend in react-native. To share code I'm extracting the trpc code to a common-package and get some error. It's probably due to bad tsconfig (I'm not yet an ts-expert...).

This error occurs when building the nextjs project:

../common/utils/trpc-client.ts:14:14
Type error: Exported variable 'trpc' has or is using name 'UseTRPCInfiniteQueryOptions' from external module "mono/node_modules/@trpc/react/dist/declarations/src/createReactQueryHooks" but cannot be named.

  12 |  */
  13 |
> 14 | export const trpc = createReactQueryHooks<AppRouter>();
     |              ^
  15 |
  16 | export const transformer = superjson;
  17 |
error Command failed with exit code 1.

I don't understand the errormessage. But if i go inte node_modules/@trpc/react/dist/declarations/createReactQueryHooks.d.ts and export all interfaces (e.g the UseTRPCInfiniteQueryOptions-interface) the error goes away.

My question is;
Does anyone understand the error and know how I should config my tsconfig to solve this?
Or, is this something that could be fixed by a version-update on trpc? 🙏

// Christopher

[KATT]

Tjena,

I know @cyrus-za has a monorepo setup with Nx - maybe he can share some insights?

In the actual tRPC repo I have a monorepo-setup with lerna/yarn so maybe it's worth poking around here for inspo?

The way I'd think would be nice for setup:

.
└── packages
    ├── nextjs # <-- your next app, importing `@myorg/trpc`, exposing the endpoints 
    ├── react-native # <-- importing `@myorg/trpc`
    └── trpc # <-- your trpc routers without api handler

Feel free to book a slot with me and I'll try to help you (for free) - super curious about the RN-stuff - https://calendly.com/alexdotjs/30min

[cNille]

Would love having a chat with you about the setup, I'll book a slot 🥳
I have a similar setup that you propose but with the packages web, app, and common. The common-package both contains the trpc routers, but also some react-code so that we in the future can share it with the web using react-native-web. I'll look into the repo for inspiration until our meeting.

[KATT]

I would possibly separate the common and component stuff - or make it so you can do the import as @vembla/common/trpc + @vembla/common/components.

Be mindful of bundle sizes & prevent the accidental import of server stuff on the client. If you have one entry point and do import {MyComponent} from '@vembla/common' and that also exports trpc-server stuff I don't know if it'll be cleaned up by webpack.

I use preconstruct for trpc, see their docs about multiple entrypoints. If you have a @vembla/common-lib, you should make sure it has multiple entrypoints, but might be easier to just separate it into two packages.

[KATT]

It was great chatting to you! Excited to hear about how it'll work with RN.

Would be great if you can share your progress and even more awesome if you'd like to do like a reference project with the monorepo setup 🙌

[github-actions]

This issue has been locked because it had no new activity for 14 days. If you are running into a similar issue, please create a new issue. Thank you.