Oung Seik
Oung Seik•2w ago

Can't build NextJS with TRPC vanilla client.

My mono-repo contains 3 apps and one packages as under. 
- app
  - agent
  - server # trpc server
  - client # nextjs with vanilla trpc client
- packages
  - domain
- app
  - agent
  - server # trpc server
  - client # nextjs with vanilla trpc client
- packages
  - domain
I imported the trpc server from the client, the types resolve well in the text editor, but when I built I got the type error like this. 
../server/src/trpc/common.ts:10:22
Type error: Cannot find module '@/collections' or its corresponding type declarations.

   8 | import { Readable } from "stream";
   9 |
> 10 | import { User } from "@/collections";
     |                      ^
  11 | import config from "@/config";
  12 | import { PUBLIC_PATH } from "@/const";
  13 |
Static worker exited with code: 1 and signal: null
../server/src/trpc/common.ts:10:22
Type error: Cannot find module '@/collections' or its corresponding type declarations.

   8 | import { Readable } from "stream";
   9 |
> 10 | import { User } from "@/collections";
     |                      ^
  11 | import config from "@/config";
  12 | import { PUBLIC_PATH } from "@/const";
  13 |
Static worker exited with code: 1 and signal: null
This is tsconfig.json of the client. Is there anything wrong? 
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "jsx": "preserve",
    "incremental": true,
    "types": [],
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "references": [{"path": "../server"}],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "jsx": "preserve",
    "incremental": true,
    "types": [],
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "references": [{"path": "../server"}],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
3 Replies
Oung Seik
Oung SeikOP•2w ago
And this is the tsconfig.json of the server. 
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "dist",
    "declarationMap": true,
    "esModuleInterop": true,
    "incremental": false,
    "isolatedModules": true,
    "lib": [ "es2022" ],
    "module": "CommonJS",
    "moduleDetection": "force",
    "moduleResolution": "bundler",
    "noUncheckedIndexedAccess": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "allowJs": true,
    "strict": true,
    "target": "ESNext",
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "baseUrl": ".",
    "paths": {
      "@/*": [ "./src/*" ]
    }
  },
  "include": [ "src", "tests" ],
  "exclude": [
    "**/node_modules",
    "**/.*/"
  ]
}
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "dist",
    "declarationMap": true,
    "esModuleInterop": true,
    "incremental": false,
    "isolatedModules": true,
    "lib": [ "es2022" ],
    "module": "CommonJS",
    "moduleDetection": "force",
    "moduleResolution": "bundler",
    "noUncheckedIndexedAccess": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "allowJs": true,
    "strict": true,
    "target": "ESNext",
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "baseUrl": ".",
    "paths": {
      "@/*": [ "./src/*" ]
    }
  },
  "include": [ "src", "tests" ],
  "exclude": [
    "**/node_modules",
    "**/.*/"
  ]
}
FluX
FluX•2w ago
I've had similar issues before and it has to do with path aliases in the tsconfig. I think what's happening is that nextjs tries to resolve @/collections inside of the client app folder and not inside the server folder. Unfortunately I don't have a solution for you, since I work around that by avoiding aliases in my trpc routers, though I agree using path aliases is way cleaner for imports.
Oung Seik
Oung SeikOP•2w ago
Yes bro. Currently I fix that by removing type checking in the nextjs production build. I should remove path alias as you suggest as well.

Did you find this page helpful?