David Alonso•9mo ago

Way to prevent npx convex dev from running when there's compilation errors

On several occasions I have run into runtime issues only to realize that my convex functions had TS errors which ofc explained the issues. Wondering if you'd recommend doing tsc before running convex or if there's a more efficient way?

21 Replies

sshader•9mo ago

It should be running tsc by default -- can you confirm that you have typescript installed in your project (maybe npm ls and confirm that typescript shows up?)

David AlonsoOP•9mo ago

├── typescript@5.4.5 My setup:

"dev": "npm-run-all --parallel dev:frontend dev:backend",
"dev:frontend": "next dev",
"dev:backend": "npm run dev:convex",
"dev:convex": "convex dev --tail-logs",
"check:ts": "tsc --noEmit"

"dev": "npm-run-all --parallel dev:frontend dev:backend",
"dev:frontend": "next dev",
"dev:backend": "npm run dev:convex",
"dev:convex": "convex dev --tail-logs",
"check:ts": "tsc --noEmit"

npm run dev works fine (I get a Convex functions ready message) if I change to

"dev": "npm-run-all check:ts --parallel dev:frontend dev:backend",

"dev": "npm-run-all check:ts --parallel dev:frontend dev:backend",

I get compilation errors. This might be an issue with the setup...

sshader•9mo ago

To clarify, these are all compilation errors within the convex directory? Some things I'd check: * Does npx convex dev detect type errors in the convex directory (e.g. add const foo: string = 123 and see if it complains) * Do you have major differences between the tsconfig in your convex directory vs. the one for your main project? (confusingly, I believe npx convex dev will use the first one, but npx tsc at the root of your project would use the second one)

David AlonsoOP•9mo ago

Okay before I answer your questions, I was just doing an experiment:

"dev:concurrent:test": "concurrently --names \"FRONTEND,BACKEND\" -c \"bgBlue.bold,bgGreen.bold\" \"npm run dev:frontend\" \"npm run dev:backend\"",

"dev:concurrent:test": "concurrently --names \"FRONTEND,BACKEND\" -c \"bgBlue.bold,bgGreen.bold\" \"npm run dev:frontend\" \"npm run dev:backend\"",

This works as expected. Before I wasn't getting errors in either files inside convex/ or outside (e.g. tsx files), but with this script I do so it must be a weird issue with npm-run-all? i have little experience with this

David AlonsoOP•9mo ago

convex complains now when I add TS errors to convex/ functions

David AlonsoOP•9mo ago

so all goos, I'll stay away from npm-run-all

ballingt•9mo ago

@David Alonso could you show the output from the old version? We currently recommend npm-run-all so if there's an issue it would be helpful to know about it. In addition to sshader's questions above, could you try changing your "dev:convex": "convex dev --tail-logs", command to convex dev --typecheck=enable, which should error out if it can't find TypeScript?

David AlonsoOP•9mo ago

Afk atm but will get back to you! I'm pretty confused right now...

export const updateHeadingText = mutation({
  args: {
    blockId: v.id("blocks"),
    text: v.string(),
  },
  handler: async (context, args) => {
    const { blockId, text } = args;
    const existingBlock = (await context.db.get(blockId)) as HeadingBlock;
    if (existingBlock.properties.dataSource !== "manual") {
      throw new Error("Heading block is not editable");
    }
    const headingUpdate: Partial<HeadingBlck> = { // TS Error here due to typo in HeadingBlock
      updatedAt: Date.now(),
      properties: {
        ...existingBlock.properties,
        text,
      },
    };
    return await context.db.patch(blockId, headingUpdate);
  },
});

export const updateHeadingText = mutation({
  args: {
    blockId: v.id("blocks"),
    text: v.string(),
  },
  handler: async (context, args) => {
    const { blockId, text } = args;
    const existingBlock = (await context.db.get(blockId)) as HeadingBlock;
    if (existingBlock.properties.dataSource !== "manual") {
      throw new Error("Heading block is not editable");
    }
    const headingUpdate: Partial<HeadingBlck> = { // TS Error here due to typo in HeadingBlock
      updatedAt: Date.now(),
      properties: {
        ...existingBlock.properties,
        text,
      },
    };
    return await context.db.patch(blockId, headingUpdate);
  },
});

this typo doesn't cause npm-run-all or concurrently commands to show any errors. But if I manually run npx tsc it does show up If I add a different error like commenting out one of the }; lines then the error does show up after the message: Preparing convex functions... in both cases... When I run:

"dev": "concurrently --names \"TSC,FRONTEND,BACKEND\" -c \"bgBlue.bold,bgGreen.bold,bgMagenta.bold\" \"npm run check:ts:watch\" \"npm run dev:frontend\" \"npm run dev:backend\"",

"dev": "concurrently --names \"TSC,FRONTEND,BACKEND\" -c \"bgBlue.bold,bgGreen.bold,bgMagenta.bold\" \"npm run check:ts:watch\" \"npm run dev:frontend\" \"npm run dev:backend\"",

I get this: 9:06:21 AM - File change detected. Starting incremental compilation... [TSC] [TSC] convex/mutations/blocks/headings.ts(16,34): error TS2552: Cannot find name 'HeadingBock'. Did you mean 'HeadingBlock'? [TSC] [TSC] 9:06:21 AM - Found 1 error. Watching for file changes. [BACKEND] - Preparing Convex functions... [BACKEND] [BACKEND] ✔ 09:06:24 Convex functions ready! (2.64s) But adding the typecheck flag does reveal something;

Found no convex/tsconfig.json to use to typecheck Convex functions, so skipping typecheck.

Found no convex/tsconfig.json to use to typecheck Convex functions, so skipping typecheck.

After running npx convex codegen --init I now do get errors when I add a typo to HeadingBlock (see above). This is with npm-run-all. When I add a typo to tsx files I don't see any errors in the console though, unless I add an explicit tsc call in my command sequence. This is probably more of a Next question than convex but maybe you can still advise on how I should be running: "dev:frontend": "next dev", so that I catch these ts errors in tsx files?

Michal Srb•9mo ago

Next's philosophy is not to block on typescript errors during the dev cycle. That's why you don't see those TypeScript errors in the terminal. Can you not rely on your IDE to show you TypeScript errors? Something like https://github.com/microsoft/vscode/issues/13953#issuecomment-285924007 could be helpful as well, in case you don't have the relevant files open (or try enableProjectDiagnostics, but VS Code is not working on it going further).

GitHub

Feature Request: Show all errors and warnings in project for all Ja...

I am using VS Code on a project at work that has hundreds of files and many layers of nested sub-directories. I frequently make changes that break many files, such as changing the call signature of...

David AlonsoOP•9mo ago

Thanks Michal, quite new to Next so this is super helpful! Curious why you guys recommend npm-run-all vs concurrently? @ballingt

ballingt•9mo ago

Either should be fine, you were just doing us a favor and confirming there wasn't something wrong with npm-run-all.

David AlonsoOP•9mo ago

We moved to a monorepo setup where our next app is in packages/nextapp/ instead of at the top level. Our node_modules are at the top level of the monorepo. When I do npm lsinside the nextapp/ I see typescript. but when I run convex dev I see No TypeScript binary found, so skipping typecheck. - How can I update my tsconfig.json inside the convex/ folder to fix this? tagging @epmatt

ballingt•9mo ago

Ah so there are no node_modules at all at packages/nextapp, but there is a package.json there? @David Alonso

Michal Srb•9mo ago

I am not aware of monorepo setups where node_modules aren’t setup in each package (they might just be symlinks but they are there).

David AlonsoOP•9mo ago

correct! we might be doing something wrong, but we were following the lerna tutorial. Any monorepo managers you'd recommend instead?

FleetAdmiralJakob 🗕 🗗 🗙•9mo ago

Turborepo?

David AlonsoOP•9mo ago

will try it out at some point, thanks for the suggestion! Maybe there's a quick fix we can find in the meantime..

ballingt•9mo ago

There could be a CLI fix here, could you point us at the guide you used for this @David Alonso? If this is a supported setup (not having any node_modules in a project with a package.json) then we'll support it by walking parent directories to find a TypeScript executable.

epmatt•9mo ago

We followed the guide here to add Lerna to our existing repo: https://lerna.js.org/docs/getting-started#adding-lerna-to-an-existing-repo

Getting Started | Lerna

Lerna comes with a dedicated init command to assist you with both adding lerna to an existing repo, or creating one from scratch.

v•9mo ago

I've seen this tool before, never used it though

FleetAdmiralJakob 🗕 🗗 🗙•9mo ago

I never had any problems with it. Idk Lerna or other tools in the monorepo space but Turborepo was a great experience

Way to prevent npx convex dev from running when there's compilation errors

Did you find this page helpful?