sstanf
sstanf•2w ago

Unable to get proper API typing in IDE

After switching to a monorepo setup (PNPM workspaces with NX), I am no longer able to get typing/auto complete with api. aside from auth functions and one other function set. Deleting the _generated folder and running npx convex dev doesn't solve the issue. _generated/api.d.ts appears to contain all the correct typing. My frontend (Tanstack Start) TS config: 
{
  "include": ["**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "target": "ES2022",
    "jsx": "react-jsx",
    "module": "ESNext",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": false,
    "noEmit": true,

    /* Linting */
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "@buzzfair/ui/components/*": ["../../packages/ui/src/components/*"],
      "@buzzfair/ui/form/*": ["../../packages/ui/src/form/*"],
      "@buzzfair/ui/maps/*": ["../../packages/ui/src/maps/*"],
      "@buzzfair/ui/global/*": ["../../packages/ui/src/global/*"],
      "@buzzfair/ui/kibo-ui/*": ["../../packages/ui/src/kibo-ui/*"],
      "@buzzfair/ui/hooks/*": ["../../packages/ui/src/hooks/*"],
      "@buzzfair/ui/lib/*": ["../../packages/ui/src/lib/*"],
      "@buzzfair/convex/*": ["../../packages/convex/*"]
    }
  }
}
{
  "include": ["**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "target": "ES2022",
    "jsx": "react-jsx",
    "module": "ESNext",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": false,
    "noEmit": true,

    /* Linting */
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "@buzzfair/ui/components/*": ["../../packages/ui/src/components/*"],
      "@buzzfair/ui/form/*": ["../../packages/ui/src/form/*"],
      "@buzzfair/ui/maps/*": ["../../packages/ui/src/maps/*"],
      "@buzzfair/ui/global/*": ["../../packages/ui/src/global/*"],
      "@buzzfair/ui/kibo-ui/*": ["../../packages/ui/src/kibo-ui/*"],
      "@buzzfair/ui/hooks/*": ["../../packages/ui/src/hooks/*"],
      "@buzzfair/ui/lib/*": ["../../packages/ui/src/lib/*"],
      "@buzzfair/convex/*": ["../../packages/convex/*"]
    }
  }
}
3 Replies
Convex Bot
Convex Bot•2w ago
Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!
Sara
Sara•2w ago
What about your config in the convex folder? Are you dealing with type errors in the code? And do you happen to be using the relative path import or the shortened one?
sstanf
sstanfOP•2w ago
@Sara tsconfig in the convex folder 
{
  "compilerOptions": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "noUnusedLocals": true,
    "jsx": "react-jsx",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "~/*": ["../../*"],
      "@cvx/*": ["./convex/*"]
    },

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["./convex/**/*", "../errors.ts"],
  "exclude": ["./convex/_generated"]
}
{
  "compilerOptions": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "noUnusedLocals": true,
    "jsx": "react-jsx",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "~/*": ["../../*"],
      "@cvx/*": ["./convex/*"]
    },

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["./convex/**/*", "../errors.ts"],
  "exclude": ["./convex/_generated"]
}
An example import 
import { api } from '@buzzfair/convex/_generated/api';
import { api } from '@buzzfair/convex/_generated/api';
Then in a query like this, the IDE will show an error for 
```
  const { data: events, isLoading } = useQuery(
    convexQuery(api.events.getOrganizationEvents, {})
  );
```
  const { data: events, isLoading } = useQuery(
    convexQuery(api.events.getOrganizationEvents, {})
  );
There error shown: 
Property 'events' does not exist on type '{ auth: { signIn: FunctionReference<"action", "public", { provider?: string | undefined; verifier?: string | undefined; refreshToken?: string | undefined; params?: any; calledBy?: string | undefined; }, { ...; }, string | undefined>; signOut: FunctionReference<...>; }; library_images: { ...; }; }
Property 'events' does not exist on type '{ auth: { signIn: FunctionReference<"action", "public", { provider?: string | undefined; verifier?: string | undefined; refreshToken?: string | undefined; params?: any; calledBy?: string | undefined; }, { ...; }, string | undefined>; signOut: FunctionReference<...>; }; library_images: { ...; }; }
But if I check _generated/api.d.ts, import type * as events from "../events.js"; is present. It seems like the file is being generated as normally, but the api is using some sort of old cached version.

Did you find this page helpful?