yeetcode.io•6mo 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•6mo ago

@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.ioOP•6mo 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•6mo ago

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.ioOP•6mo ago

omg, thank you so much! let me look at this and see if I can figure out what is wrong

Ofir Smolinsky•6mo ago

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.ioOP•6mo 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•6mo ago

what monorepo tool u use btw?

yeetcode.ioOP•6mo 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•6mo ago

is it established repo or new one?

yeetcode.ioOP•6mo ago

its a few months old

Ofir Smolinsky•6mo ago

i reccomend turborepo ahhh i see

yeetcode.ioOP•6mo 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•6mo ago

i guess TRPC is considered shared dependency : ) but try to solve it without turborepo first

yeetcode.ioOP•6mo ago

sure, thank you! i iwll get back to you

Ofir Smolinsky•6mo ago

monorepo is mostly for sharing depndencies yea

yeetcode.ioOP•6mo 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•6mo ago

yea took me a couple hours yesterday, glad you got it working : ) whatre u working on btw?

yeetcode.ioOP•6mo ago

I'm working on a social media app! I'll post it here when it is ready

Ofir Smolinsky•6mo ago

😍