winsoroaks•13mo ago

possible to do path alias in convex/tsconfig?

hello team. is it possible to add an alias for the path in convex/tsconfig? i tried adding the following and things started to break. using the relative path works. thanks!

"compilerOptions": {
  "paths": {
    "~/*": ["./*"]
  },
}

"compilerOptions": {
  "paths": {
    "~/*": ["./*"]
  },
}

14 Replies

erquhart•13mo ago

Are you intentionally setting ~/ to repo root or /convex ? I use it as an alias for root and it works:

    "paths": {
      "~/*": ["../*"],
    }

    "paths": {
      "~/*": ["../*"],
    }

winsoroaksOP•13mo ago

yea, i intentionally want it for /convex root works for me too

erquhart•13mo ago

Hmm yeah I'm seeing the same, that's weird. "../convex/*" also doesn't work.

winsoroaksOP•13mo ago

yea just curious. no big deal tho, life's good with relative path too 😂

erquhart•13mo ago

I use what I pasted above, so convex root is ~/convex/ - still better than relative.

winsoroaksOP•13mo ago

oh u r right!!! good idea 🙂 thanks!!

erquhart•13mo ago

No problem!

ian•13mo ago

One thing that causes trouble is when there is a disconnect between the convex/tsconfig.json and the tsconfig.json you have in your frontend folder. Not an expert, but if others have trouble that's worth playing with

erquhart•13mo ago

@winsoroaks I just realized the errors I was seeing were from eslint, typescript was actually resolving fine. Any chance that was the case for you? My error was from import/no-unresolved specifically. The fix for eslint is to add the paths to both your base tsconfig and your convex tsconfig to eslint config:

  'settings': {
    'import/resolver': {
      typescript: {
        project: ['convex/tsconfig.json', 'tsconfig.json'],
      },
  }

  'settings': {
    'import/resolver': {
      typescript: {
        project: ['convex/tsconfig.json', 'tsconfig.json'],
      },
  }

Docs: https://github.com/import-js/eslint-import-resolver-typescript?tab=readme-ov-file#configuration

winsoroaksOP•13mo ago

oh wow interesting, thanks! i've never installed the pkg above

erquhart•12mo ago

Following up in case anyone else comes across this post - this did not actually work out. As far as I can tell, with nested typescript configs, the base config will need you to treat path aliases as a global set. I had to go with @cvx/ for relative base path in convex folder as @/ is already pointing at /src. You'll want to list all aliases in a tsconfig if the alias is in the tsconfig directory or any root, which means duplicating those in nested tsconfigs.

Abdulramon Jemil•5mo ago

@erquhart Is it not possible to just extend the root tsconfig using the extends option (https://www.typescriptlang.org/tsconfig/#extends), so that the whole project uses the same tsconfig, and only specify the options required by Convex in convex/tsconfig as in:

{
  /* This TypeScript project config describes the environment that
   * Convex functions run in and is used to typecheck them.
   * You can modify it, but some settings required to use Convex.
   */
  "compilerOptions": {
    /* Extend the base config at the root of the project to avoid double maintenance */
    "extends": "../tsconfig.json",

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["./**/*"],
  "exclude": ["./_generated"]
}

{
  /* This TypeScript project config describes the environment that
   * Convex functions run in and is used to typecheck them.
   * You can modify it, but some settings required to use Convex.
   */
  "compilerOptions": {
    /* Extend the base config at the root of the project to avoid double maintenance */
    "extends": "../tsconfig.json",

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["./**/*"],
  "exclude": ["./_generated"]
}

TSConfig Reference - Docs on every TSConfig option

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.

ian•4mo ago

Did this work for you? I agree that approach looks cleaner

Abdulramon Jemil•4mo ago

I didn't try it. I haven't worked with Convex in a while

possible to do path alias in convex/tsconfig?

Did you find this page helpful?