davidD
tRPC•2y ago•
9 replies
david

All backend imports becoming accessible on frontend?

Node Environment Version: v20.10.0
Package Manager: PNPM Workspaces
Repo Setup: Monorepo/Turborepo
Environment: WSL with VSCode

TRPC Versions:
    "@trpc/client": "11.0.0-rc.403",
    "@trpc/react-query": "11.0.0-rc.403",
    "@trpc/server": "11.0.0-rc.403",



Hello! First time user of TRPC.

I've setup my project, and now have it so that it exports appRouter on the backend
Backend
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>({});


The structure is setup as follows
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";


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"
  },

Backend trpc.types.ts
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";
Was this page helpful?