I've setup my project, and now have it so that it exports appRouter on the backend Backend
export type AppRouter = typeof appRouter;
export type AppRouter = typeof appRouter;
Then on the frontend like the tutorial I have a hooks file for trpc that imports the backend Frontend
import { createTRPCReact } from "@trpc/react-query";import type { AppRouter } from "../../../../../backend/src";export const trpc = createTRPCReact<AppRouter>({});
import { createTRPCReact } from "@trpc/react-query";import type { AppRouter } from "../../../../../backend/src";export const trpc = createTRPCReact<AppRouter>({});
The structure is setup as follows
apps/├─ backend/├─ frontend/
apps/├─ backend/├─ frontend/
However in VSCode all other backend imports are displayed during autoimport now in the frontend project? For example I can now do something like
import User from "../../../../../backend/src/models/User";
import User from "../../../../../backend/src/models/User";
When the line to import AppRouter is removed, none of the backend autocomplete imports appear.
I realistically would only like to expose that type and nothing else, I don't think imports actually work, as in Vite/React will throw errors when you try to use that backend import them during runtime. But is there a way to prevent the other imports from appearing? Is this behaviour expected?
I also tried to use pnpm link and export only a file containing the AppRouter but this didn't seem to prevent it either Backend package.json
"exports": { ".": "./src/types/trpc.types.ts" },
"exports": { ".": "./src/types/trpc.types.ts" },
Backend trpc.types.ts
import { appRouter } from "../app";export type AppRouter = typeof appRouter;
import { appRouter } from "../app";export type AppRouter = typeof appRouter;
Frontend
import type { AppRouter } from "backend";// This still shows when writing "import Us.." for example.import User from "node_modules/backend/src/models/User";
import type { AppRouter } from "backend";// This still shows when writing "import Us.." for example.import User from "node_modules/backend/src/models/User";