uploadthing icon indicating copy to clipboard operation
uploadthing copied to clipboard

[bug]: Typescript declaration: true not supported

Open 4leite opened this issue 9 months ago โ€ข 4 comments

Provide environment information

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (6) x64 Intel(R) Core(TM) i5-9600KF CPU @ 3.70GHz
    Memory: 22.75 GB / 31.28 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.local/share/pnpm/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v21.7.1/bin/yarn
    npm: 10.5.0 - ~/.local/share/pnpm/npm
    pnpm: 8.15.7 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: 124.0.6367.60
    Chromium: 124.0.6367.60
  npmPackages:
    typescript: 5.4.2 => 5.4.2

Describe the bug

Getting:

src/uploadthing/file-router.ts:15:7 - error TS2742: The inferred type of 'initFileRouter' cannot be named without a reference to '.pnpm/@[email protected]_@[email protected]/node_modules/@uploadthing/shared'. This is likely not portable. A type annotation is necessary.

I'm building a library that is then consumed downstream, so declaration files are a requirement.

Link to reproduction

https://github.com/4leite/ut-declaration

To reproduce

git clone [email protected]:4leite/ut-declaration.git
cd ut-declaration
pnpm install
pnpm build

Additional information

#192 was closed (maybe fixed?) #252 was closed (superseded by #272) #272 was closed (won't fix)

I've indicated I'm down to submit a PR, but looking at the talented folks who have already thrown their hands up, I'm not sure I've got any better suggestions.

๐Ÿ‘จโ€๐Ÿ‘งโ€๐Ÿ‘ฆ Contributing

  • [X] ๐Ÿ™‹โ€โ™‚๏ธ Yes, I'd be down to file a PR fixing this bug!

Code of Conduct

  • [X] I agree to follow this project's Code of Conduct

4leite avatar May 08 '24 09:05 4leite

Workaround is to add empty imports per the error messages, eg:

import type {} from "@uploadthing/shared"
import type {} from "next/server"

edit: added type annotation per suggestion below

4leite avatar May 08 '24 10:05 4leite

yea i think this is the only way.

this is an issue in the "lazyness" of TypeScript where you have nested packages it doesn't dig deep enough to find those types automatically for you.

what i have found is that using something other than pnpm solves this sometimes, as the nested node_modules/.pnpm seems to make it even harder for typescript to automatically find the types...

you can change it to import type * as UTShared from "@uploadthing/shared" so that the imports aren't present in the output javascript though.

from my understanding this is also getting improved in typescript 5.5: https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#consulting-packagejson-dependencies-for-declaration-file-generation

juliusmarminge avatar May 08 '24 11:05 juliusmarminge

Nice, I mostly raised the bug to document the workaround and see if there were any better solutions.

4leite avatar May 08 '24 12:05 4leite

Yea - it's unfortunate we have this limitation in TypeScript right now. It's like this for a lot of libraries that has framework agnostic core packages that are not explicitely installed by the end user.

I reproduced it in ReactQuery, NextAuth and we tried extracting a bunch of core logic in trpc and ran into it there too.

Hopefully it will be a thing of the past when 5.5 comes, but in the meantime using those "fake imports" is the way i think...

juliusmarminge avatar May 08 '24 12:05 juliusmarminge

This issue has been automatically marked as stale because it has not had any activity for 10 days. It will be closed in 5 days if no further activity occurs.

github-actions[bot] avatar May 19 '24 00:05 github-actions[bot]

This issue has been closed because it has not had any activity for 5 days since being marked as stale.

github-actions[bot] avatar May 25 '24 00:05 github-actions[bot]

I use pnpm in a monorepo and ran into this too. I was following the Next.js App Router example.

Installing @uploadthing/shared in the same workspace seems to solve it.

lirbank avatar Sep 28 '24 23:09 lirbank