Var&•15mo ago

convex not compiling due to TS/Flow errors

Apologies if this not the right place to ask similar questions, but npx convex dev for me started to fail and I can't tell when and why. I tried to go back to older versions of dependencies but no luck. Basically I'm getting a lot of TS/Flow errors when running the above command.

Errors  Files
     1  node_modules/@tamagui/types/types.d.ts:165
    16  node_modules/@tamagui/web/types/config.d.ts:27
    16  node_modules/@tamagui/web/types/hooks/useConfiguration.d.ts:34
     1  node_modules/@types/react/global.d.ts:153
    34  node_modules/react-native/types/modules/globals.d.ts:78
    12  node_modules/typescript/lib/lib.dom.d.ts:2289

Errors  Files
     1  node_modules/@tamagui/types/types.d.ts:165
    16  node_modules/@tamagui/web/types/config.d.ts:27
    16  node_modules/@tamagui/web/types/hooks/useConfiguration.d.ts:34
     1  node_modules/@types/react/global.d.ts:153
    34  node_modules/react-native/types/modules/globals.d.ts:78
    12  node_modules/typescript/lib/lib.dom.d.ts:2289

and with --typecheck=disable flag I'm getting the following 2 errors

✘ [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:13:12:
      13 │ import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
         │             ^
         ╵             from

✘ [ERROR] Unexpected "typeof"

    node_modules/react-native/index.js:14:7:
      14 │ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
         ╵

✘ [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:13:12:
      13 │ import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
         │             ^
         ╵             from

✘ [ERROR] Unexpected "typeof"

    node_modules/react-native/index.js:14:7:
      14 │ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
         ╵

I researched and it seems like the Flow is failing the compile and I don't know how to address it. Would appreciate a lot if someone can guid me on this. Thanks.

57 Replies

Var&OP•15mo ago

My project is an react native project with Expo: "expo": "49.0.23", "react": "18.2.0", "react-native": "0.72.10", and "@types/react": "~18.2.58",

erquhart•15mo ago

I don’t have much experience with Flow, so not sure where that would come into play unless you’re running it yourself for your project. It looks like there’s typescript syntax in your dependency js files, which should only have js. I’m honestly not sure how that would happen. Have you tried deleting node_modules and reinstalling dependencies? Beyond that I would bisect - find an earlier commit that works and narrow down which commit introduced the problem. I use all of the dependencies you mention there with very similar versions, haven’t seen anything like this. I’m betting there was a small change to your build configuration at some point recently, but that’s just a guess.

ballingt•15mo ago

It looks like there's a configuration issue such that your React Native setup doesn't understand TypeScript. What tutorial or template or guide did you follow to get in this situation?

Var&OP•15mo ago

@erquhart and @ballingt thanks for getting back to me, this is so weird, I've been using this codebase for a year now, which was a Tamagui community startup repo, had no issue upgrading dependencies, but I dont know what happened. Sorry for the noise. however one convex related question, does convex cli uses any sort of cache within the project? thanks

Michal Srb•15mo ago

does convex cli uses any sort of cache within the project

Can you elaborate? What would you like to be cached? Do you mean CLI or the React client?

Var&OP•15mo ago

sure, I meant does convex has/store any cache for running cli commands, imagine pnpm. like when I run npx convex dev does it first look at some cache in the project? for my issue, whatever dependency I put in package.json, even when everything was fine, I get the same errors. (pictures above)

ballingt•15mo ago

What would be stored in this cache? Are you wondering if there's something to delete if things aren't working?

Var&OP•15mo ago

yes, exactly, somehow purge the cache

ballingt•15mo ago

npx convex dev doesn't cache any data on the local filesystem. It reads the files in the convex directory and follows the imports in those files to bundle that code and sends it to the Convex deployment. That code can come from a node_modules directory where npm or pnpm would have installed it. But convex doesn't put anything in there.

Var&OP•15mo ago

that was my guess too, no problem I'll figure this somehow thanks for your time and messages

ballingt•15mo ago

The errors you shared look like frontend issues, not coming from convex. Can you build just the frontend and debug that first?

Var&OP•15mo ago

my project is Expo, both ios and android build and run with no issue but i'm kind of blocked bc I can't add anything to backend :/ during native build I don't get any error... the only thing I did in convex folder was to rename one file, do you think that would cause this ?

ballingt•15mo ago

What is the command you're running, and what is the error you're getting? It's surprising that you get an error involving the file node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js when you run npx convex dev because code in the convex/ directory shouldnt' import react-native.

Var&OP•15mo ago

both npx convex codegen/dev produce these errors. the list is long, but they all are type issues, like this:

node_modules/react-native/types/modules/globals.d.ts:187:3 - error TS2717: Subsequent property declarations must have the same type.  Property 'headers' must be of type 'HeadersInit | undefined', but here has type 'HeadersInit_ | undefined'.

187   headers?: HeadersInit_ | undefined;

node_modules/react-native/types/modules/globals.d.ts:295:3 - error TS2717: Subsequent property declarations must have the same type.  Property 'load' must be of type 'ProgressEvent<XMLHttpRequestEventTarget>', but here has type 'ProgressEvent<EventTarget>'.

295   load: ProgressEvent;

node_modules/react-native/types/modules/globals.d.ts:187:3 - error TS2717: Subsequent property declarations must have the same type.  Property 'headers' must be of type 'HeadersInit | undefined', but here has type 'HeadersInit_ | undefined'.

187   headers?: HeadersInit_ | undefined;

node_modules/react-native/types/modules/globals.d.ts:295:3 - error TS2717: Subsequent property declarations must have the same type.  Property 'load' must be of type 'ProgressEvent<XMLHttpRequestEventTarget>', but here has type 'ProgressEvent<EventTarget>'.

295   load: ProgressEvent;

and 80 more of these. yea, it's so weird, I dont import anything expo/rn related into my backend/convex

ballingt•15mo ago

These look like TypeScript errors related to having multiple libraries that declare globals installed.

Var&OP•15mo ago

ahh good one

ballingt•15mo ago

If you just get these when you run npx convex typecheck / npx convex codegen / npx convx dev then it might be the convex/tsconfig.json file is configured differently than your other tsconfig.json file in a way that makes it not work Is there a guide or a template you followed to set this app up?

Var&OP•15mo ago

yes, and modified as the proj grew. let me share some

ballingt•15mo ago

ah sorry you answered that above

Var&OP•15mo ago

no worries, I appreciate your time and effort

ballingt•15mo ago

yeah if you have the

Tamagui community startup repo

would be helpful we'd like to make sure Convex works with the common ways to set up an app, sounds like this is one What's your convex/tsconfig.json look like? Also is the repository something you can share?

Var&OP•15mo ago

and it was working for the longest time. there was no issue until recently, I can't pin point when things went south, because it's not always that i start the convex dev server... I used this stratup repo, when it was on expo 49. https://github.com/ivopr/tamagui-expo I'm still on expo 49, haven;t upgraded yet my tsconfig for convex is the one recommended by the docs

{
  /* 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": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "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": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,

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

and this is my custom tsconfig

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@Convex/*": ["./convex/*"],
      "@Api/*": ["src/api/*"],
      "@App/*": ["src/app/*"],
      "@Assets/*": ["src/assets/*"],
      "@Components/*": ["src/components/*"],
      "@Context/*": ["src/context/*"],
      "@Screens/*": ["src/screens/*"],
      "@Stores/*": ["src/stores/*"],
      "@Utils/*": ["src/utils/*"],
      "@Hooks/*": ["src/hooks/*"]
    }
  },
  "exclude": ["node_modules"]
}

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@Convex/*": ["./convex/*"],
      "@Api/*": ["src/api/*"],
      "@App/*": ["src/app/*"],
      "@Assets/*": ["src/assets/*"],
      "@Components/*": ["src/components/*"],
      "@Context/*": ["src/context/*"],
      "@Screens/*": ["src/screens/*"],
      "@Stores/*": ["src/stores/*"],
      "@Utils/*": ["src/utils/*"],
      "@Hooks/*": ["src/hooks/*"]
    }
  },
  "exclude": ["node_modules"]
}

ballingt•15mo ago

Have you tried checking out old commits and npm installing from there to see if there's a point (bisecting, as erquhart mentioned above)?

Var&OP•15mo ago

PR by PR

ballingt•15mo ago

Cool, ok so some weird thing that isn't reflected in the source code or package.json / package-lock.json dependencies

Var&OP•15mo ago

I even went back to my initial commit, I get the same errors. that's when I suspected the caching question

ballingt•15mo ago

makes sense

Var&OP•15mo ago

no new changes to any config, thinkgs are like this for near a year I forgot to mention that I'm on "convex": "^1.10.0", I upgrade occasionally | Also is the repository something you can share? unfortunately no to this

ballingt•15mo ago

Would you try adding "types": [] to the "compilerOptions" section of the convex/tsconfig.json file? this is just to try to help with this TyepScript issue. Another question, are there any parent directories of this directory that have a node_modules in them? like outside the repo, on your local filesystem TypeScript will sometimes discover types in node_modules packages in ancestor directories and include them, like ../node_modules and ../../node_modules etc. Seems like a long shot but I'm trying to think of things that would not be reflected in your repository state When you checked out old revisions did you also rm node_modules; npm install at each of these? Sorry I've asked three things, I'd just do one at a time

Var&OP•15mo ago

ok so updated the tsconfig to this

{
  /* 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": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,
    "types": [],

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "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": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,
    "types": [],

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

still the same errors, 80

ballingt•15mo ago

cool, I'd remove that line then so it's back how it used to be

ballingt•15mo ago

With types: [] it should not automatically include other types according to https://www.typescriptlang.org/tsconfig#types

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.

ballingt•15mo ago

but sounds like that didn't matter

Var&OP•15mo ago

I have projects in the same directory but not in parent. not only I removed node_modules, but also yarn.lock, and other expo cached stuff, I even deleted the project from machine and checked out again something is happening outside of the code/convex. I'm suspicious to babel

ballingt•15mo ago

Are you using yarn for this?

Var&OP•15mo ago

yes

ballingt•15mo ago

Yeah for the later, non-TypeScript errors I suspect babel too, because those files are .js but have TypeScript syntax in them

Var&OP•15mo ago

I setup the project with yarn

ballingt•15mo ago

which sounds like something that babel might let you do and would be a setting somewhere And it sounds like you don't check in the yarn.lock? A trick bit is that what a npm install does can change with time because it will always install the newest versions of dependencies that match your package.json file.

Var&OP•15mo ago

I can try installing via npm to see what'd happen

ballingt•15mo ago

so a new version of e.g. react-native or expo or bable or whatever could be always being installed now that it has been released I think the issue would be the same if you don't check in a package-lock.json this is one guess for why the repo at a commit that worked before isn't working anymore

Var&OP•15mo ago

by check in are you referring to commiting to repo?

ballingt•15mo ago

yeah sorry, commit to the repo

Var&OP•15mo ago

i have, the yarn.lock is in history o isee your point,

ballingt•15mo ago

oh ok, great — then a yarn install --frozen-lockfile should install the same version of every dependency as when you committed it You might try a commit or two with that just in case

Var&OP•15mo ago

sure let me try that. but meanwhile I also have eslintrc file which looks like this

module.exports = {
  env: {
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:react-hooks/recommended"
  ],
  parser: "@typescript-eslint/parser",
  root: true,
  rules: {
    "no-console": ["error", { allow: ["error", "info"] }],
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-interface": "off",
    "prettier/prettier": ["warn", { usePrettierrc: true }],
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": ["warn"]
  }
};

module.exports = {
  env: {
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:react-hooks/recommended"
  ],
  parser: "@typescript-eslint/parser",
  root: true,
  rules: {
    "no-console": ["error", { allow: ["error", "info"] }],
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-interface": "off",
    "prettier/prettier": ["warn", { usePrettierrc: true }],
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": ["warn"]
  }
};

but again, nothing was modified on any config

ballingt•15mo ago

I don't think that would matter, TypeScript or babel or esbuild (the thing Convex uses to bundle code) do not read a .eslintrc file.

Var&OP•15mo ago

WELL WELL WELL I found a commit that it's compiling from Jan31th so I need to go one by one from that time to see where things are breaking so weid, I had done this but without that flag

ballingt•15mo ago

Good luck, glad the problem is smaller now!

Var&OP•15mo ago

I thought removing yarn.lock is a fresh install

ballingt•15mo ago

I supposed it is, just too fresh

Var&OP•15mo ago

thank you so much for your time again, cheers

ballingt•15mo ago

since it re-resolves versions

Var&OP•15mo ago

I found it, the bad apple. I was importing Icons from lucid (tamagui's icon pack) into a util.ts to return them to component, someone was not happy about that haha

erquhart•15mo ago

@Var& so the icons were React components, and you were importing them into a .ts file rather than a .tsx file, which caused the errors - is that right? A few compilation errors like this have come across the forums and understanding what took place helps with future troubleshooting.

ballingt•15mo ago

+1 interested to hear a bit more, like was this util.ts also imported directly or indirectly from a Convex function? Or can these just not be imported at all?

Var&OP•14mo ago

sorry for the delayed response. yes, exactly, this was a util.ts file that was returning icons for buttons based on conditions. the native builds (ios,android) were all good that's why I never suspected that. and the error messages from convex was leading me to nested node_module files.

convex not compiling due to TS/Flow errors

Did you find this page helpful?