yeetcode.io
yeetcode.io3w ago

The inferred type of 'trpc' cannot be named without a reference to '...'

I have a monorepo setup like this: root -tsconfig.json -frontend --tsconfig.json -backend --tsconfig.json I added a reference in the client tsconfig:
"references": [
{
"path": "../backend"
}
],
"references": [
{
"path": "../backend"
}
],
I added "composite": true to my backend tsconfig. In my root tsconfig, I have:
{
"references": [
{
"path": "./backend"
},
{
"path": "./frontend"
}
],
"files": [],
"include": [],
"exclude": ["**/node_modules"]
}
{
"references": [
{
"path": "./backend"
},
{
"path": "./frontend"
}
],
"files": [],
"include": [],
"exclude": ["**/node_modules"]
}
However, now in my client, when I create my trpc instance: export const trpc = createTRPCReact<AppRouter>(); I get a bunch of typing errors:
The inferred type of 'trpc' cannot be named without a reference to '../../../backend/node_modules/.prisma/client'. This is likely not portable. A type annotation is necessary.ts(2742)
The inferred type of 'trpc' cannot be named without a reference to '../../../backend/node_modules/@types/express'. This is likely not portable. A type annotation is necessary.ts(2742)
The inferred type of 'trpc' cannot be named without a reference to '../../../backend/node_modules/.prisma/client'. This is likely not portable. A type annotation is necessary.ts(2742)
The inferred type of 'trpc' cannot be named without a reference to '../../../backend/node_modules/@types/express'. This is likely not portable. A type annotation is necessary.ts(2742)
Where is this coming from and how can I fix it?
19 Replies
Ofir Smolinsky
@yeetcode.io what version do u have installed? i had the same issue yesterday and finally made it work i think mostly due to upgrading to v11 and doing some tsconfig changes
yeetcode.io
yeetcode.io3w ago
My frontend:
"@trpc/client": "^11.0.0-rc.433",
"@trpc/react-query": "^11.0.0-rc.433",
"@trpc/client": "^11.0.0-rc.433",
"@trpc/react-query": "^11.0.0-rc.433",
My backend:
"@trpc/server": "^11.0.0-rc.433",
"@trpc/server": "^11.0.0-rc.433",
And I don't have anything installed in my root folder Do you know if what your tsconfig settings are? Do you have the same setup as me? @Ofir Smolinsky I also believe I am supposed to have @trpc/server installed in the frontend, but when I do it doesn't fix anything And when I try to install that, I get this error:
error: Error: Unable to resolve module @trpc/client from my/file/path/frontend/App.tsx: @trpc/client could not be found within the project or in these directories:
error: Error: Unable to resolve module @trpc/client from my/file/path/frontend/App.tsx: @trpc/client could not be found within the project or in these directories:
Ofir Smolinsky
Root TSConfig:
{
"extends": "@repo/typescript-config/base.json"
}
{
"extends": "@repo/typescript-config/base.json"
}
Frontend TSConfig:
{
"extends": "@repo/typescript-config/nextjs.json",
"compilerOptions": {
"baseUrl": "../../",
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.ts", "next.config.js", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
{
"extends": "@repo/typescript-config/nextjs.json",
"compilerOptions": {
"baseUrl": "../../",
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.ts", "next.config.js", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
Packages/API TSConfig:
{
"extends": "@repo/typescript-config/base.json",
"compilerOptions": {
"outDir": "dist",
"incremental": true,
"paths": {
"@trpc/server/*": ["../../node_modules/@trpc/server/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}

{
"extends": "@repo/typescript-config/base.json",
"compilerOptions": {
"outDir": "dist",
"incremental": true,
"paths": {
"@trpc/server/*": ["../../node_modules/@trpc/server/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}

Server TSConfig:
{
"compilerOptions": {
/* Language and Environment */
"target": "es2022",
"module": "commonjs",
/* Modules */
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
"baseUrl": "./",
"rootDir": "./",
/* Emit */
"outDir": "./dist/" /* Specify an output folder for all emitted files. */,
"paths": {
"@src/*": ["./src/*"]
},
/* Interop Constraints */
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

/* Type Checking */
"strict": true /* Enable all strict type-checking options. */,

/* Completeness */
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
"resolveJsonModule": true,
"strictPropertyInitialization": false,

/* These are new rules we are checking */
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"typeRoots": ["./typings", "./node_modules/@types"],
"sourceMap": true,
"incremental": true,
"strictNullChecks": true,
"noImplicitAny": false,
"strictBindCallApply": true,
"noFallthroughCasesInSwitch": true
}
}
{
"compilerOptions": {
/* Language and Environment */
"target": "es2022",
"module": "commonjs",
/* Modules */
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
"baseUrl": "./",
"rootDir": "./",
/* Emit */
"outDir": "./dist/" /* Specify an output folder for all emitted files. */,
"paths": {
"@src/*": ["./src/*"]
},
/* Interop Constraints */
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

/* Type Checking */
"strict": true /* Enable all strict type-checking options. */,

/* Completeness */
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
"resolveJsonModule": true,
"strictPropertyInitialization": false,

/* These are new rules we are checking */
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"typeRoots": ["./typings", "./node_modules/@types"],
"sourceMap": true,
"incremental": true,
"strictNullChecks": true,
"noImplicitAny": false,
"strictBindCallApply": true,
"noFallthroughCasesInSwitch": true
}
}
Base TSConfig (the one being inherited in some of these)
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Default",
"compilerOptions": {
"declaration": false,
"declarationMap": false,
"esModuleInterop": true,
"incremental": false,
"isolatedModules": true,
"lib": ["es2022", "DOM", "DOM.Iterable"],
"module": "NodeNext",
"moduleDetection": "force",
"moduleResolution": "NodeNext",
"noUncheckedIndexedAccess": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "ES2022",
"paths": {
"@trpc/server/*": ["../../node_modules/@trpc/server/*"]
}
}
}
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Default",
"compilerOptions": {
"declaration": false,
"declarationMap": false,
"esModuleInterop": true,
"incremental": false,
"isolatedModules": true,
"lib": ["es2022", "DOM", "DOM.Iterable"],
"module": "NodeNext",
"moduleDetection": "force",
"moduleResolution": "NodeNext",
"noUncheckedIndexedAccess": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "ES2022",
"paths": {
"@trpc/server/*": ["../../node_modules/@trpc/server/*"]
}
}
}
NextJS base TSConfig
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Next.js",
"extends": "./base.json",
"compilerOptions": {
"plugins": [{ "name": "next" }],
"module": "ESNext",
"moduleResolution": "Bundler",
"allowJs": true,
"jsx": "preserve",
"noEmit": true },
}
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Next.js",
"extends": "./base.json",
"compilerOptions": {
"plugins": [{ "name": "next" }],
"module": "ESNext",
"moduleResolution": "Bundler",
"allowJs": true,
"jsx": "preserve",
"noEmit": true },
}
trpc:
"@trpc/client": "^11.0.0-next-beta.193",
"@trpc/react-query": "^11.0.0-next-beta.193",
"@trpc/client": "^11.0.0-next-beta.193",
"@trpc/react-query": "^11.0.0-next-beta.193",
I use turborepo Structure is a NextJS frontend, express backend in another dir, and a common API package where the appRouter is defined
yeetcode.io
yeetcode.io3w ago
omg, thank you so much! let me look at this and see if I can figure out what is wrong
Ofir Smolinsky
let me know if it solve the problem, it was such a headache yesterday lol and make sure to use this version maybe it will solve, make sure to delete node modules and dists before thinking it dont work
yeetcode.io
yeetcode.io3w ago
thanks yeah. I think I am having a parallel issue where I was using npm instead of yarn, and nohoist doesn't work in npm, so I am trying to migrate to yarn first.
Ofir Smolinsky
what monorepo tool u use btw?
yeetcode.io
yeetcode.io3w ago
im not using any monorepo tool, which im not sure is the right way to go about it... the backend and frontend are just colocated
Ofir Smolinsky
is it established repo or new one?
yeetcode.io
yeetcode.io3w ago
its a few months old
Ofir Smolinsky
i reccomend turborepo ahhh i see
yeetcode.io
yeetcode.io3w ago
is there a benefit to using it? i dont have any shared deps i only want to colocate the files for TRPC only but im not sure if im misunderstanding the purpose of a monorepo
Ofir Smolinsky
i guess TRPC is considered shared dependency : ) but try to solve it without turborepo first
yeetcode.io
yeetcode.io3w ago
sure, thank you! i iwll get back to you
Ofir Smolinsky
monorepo is mostly for sharing depndencies yea
yeetcode.io
yeetcode.io3w ago
Okay, I think I got it working! I migrated to yarn, used yarn workspaces, and removed all absolute paths from by backend what a nightmare!
Ofir Smolinsky
yea took me a couple hours yesterday, glad you got it working : ) whatre u working on btw?
yeetcode.io
yeetcode.io3w ago
I'm working on a social media app! I'll post it here when it is ready
Ofir Smolinsky
😍