Search code examples
reactjstypescriptbabeljstypescript-genericsprettier

vite:react-babel throwing error with Typescript ReturnType<typeof GenericConsumer<T>>

I am building an app using Vite, React, and TS. I have the following code which is causing vite to fail:

export type UseSearchFilters<T> = ReturnType<typeof useSearchFilters<T>>

It throws the following error:

[plugin:vite:react-babel] useSearchFilters.ts: Unexpected token, expected "," (6:68)

6  |  export type UseSearchFilters<T> = ReturnType<typeof useSearchFilters<T>>

Specifically it is getting bugged out by the final >, but if I delete it, it wants it back. tsc is fine with this, but babel and prettier are not for whatever reason.

I have no idea what I could be doing to cause this, since I have seen plenty of examples of people online passing a generic to a ReturnType<typeof GenericConsumer<T>> with no issues. My team is totally baffled by this and it is killing the functionality.

Any help would be appreciated here.

Dependencies:

      "@babel/core": "^7.16.7",
      "@babel/preset-env": "^7.16.8",
      "@babel/preset-react": "^7.16.7",
      "@babel/preset-typescript": "^7.16.7",
      "react": "^17.0.0",
      "react-dom": "^17.0.0",
      "typescript": "^4.3.2",
      "vite": "^3.0.4",
Solution

  • Resolution:

    I needed to update typescript to at least 4.7 (I settled on 4.7.4), but crucially @vitejs/plugin-react was out of date. Updating to the latest (2.2.0) resolved this issue for me. There is also an issue with Prettier not being happy with it, but at least the app builds now.