[misc]: Module '"uploadthing/client"' has no exported member 'UploadFileResponse'.ts(2305)

[muke5hy]

I understand that this issue may be closed if it should be filed in another category

• [X] I understand

My issue

Getting error

Module '"uploadthing/client"' has no exported member 'UploadFileResponse'.ts(2305) Uploadthings version

"@uploadthing/react": "^6.7.2",
"uploadthing": "^6.13.2",

This is how I am importing the UploadFileResponse

'use client';
import { OurFileRouter } from '@/app/api/uploadthing/core';
import { UploadDropzone } from '@uploadthing/react';
import { Trash } from 'lucide-react';
import Image from 'next/image';
import { UploadFileResponse } from 'uploadthing/client';
import { IMG_MAX_LIMIT } from './forms/product-form';
import { Button } from '@/components/ui/button';
import { useToast } from '@/components/ui/use-toast';

interface ImageUploadProps {
  onChange?: any;
  onRemove: (value: UploadFileResponse[]) => void;
  value: UploadFileResponse[];
}

export default function FileUpload({
  onChange,
  onRemove,
  value
}: ImageUploadProps) {
  const { toast } = useToast();
  const onDeleteFile = (key: string) => {
    const files = value;
    let filteredFiles = files.filter((item) => item.key !== key);
    onRemove(filteredFiles);
  };
  const onUpdateFile = (newFiles: UploadFileResponse[]) => {
    onChange([...value, ...newFiles]);
  };

When I build the project I get following error

./src/components/file-upload.tsx:6:10
Type error: Module '"uploadthing/client"' has no exported member 'UploadFileResponse'.

  4 | import { Trash } from 'lucide-react';
  5 | import Image from 'next/image';
> 6 | import { UploadFileResponse } from 'uploadthing/client';
    |          ^
  7 | import { IMG_MAX_LIMIT } from './forms/product-form';
  8 | import { Button } from '@/components/ui/button';
  9 | import { useToast } from '@/components/ui/use-toast';
 ELIFECYCLE  Command failed with exit code 1.
 ```
 
 Not sure what I am doing wrong here. 

[markflorkowski]

PLease provide more information including reproduction steps, package versions, etc.

[juliusmarminge]

You likely have incompatible versions of uploadthing and @uploadthing/react.

Make sure that you're within the accepted peer dependency ranges

[muke5hy]

You likely have incompatible versions of uploadthing and @uploadthing/react.

Make sure that you're within the accepted peer dependency ranges

I have updated with few more details. Which version should I use?

[muke5hy]

PLease provide more information including reproduction steps, package versions, etc.

I have updated the question with more details.

[markflorkowski]

Oh, I see. That type doesn't really exist. We use it in the documentation to explain the shape of the data provided to the onUploadComplete function. Docs might be a bit unclear on that. cc @juliusmarminge

[juliusmarminge]

(I think) that exists but it might have been renamed since it existed both on the server and client before

https://github.com/pingdotgg/uploadthing/blob/24d639ccba80e301342aeac2630ab34ec6746461/packages/uploadthing/src/types.ts#L23

[muke5hy]

(I think) that exists but it might have been renamed since it existed both on the server and client before

https://github.com/pingdotgg/uploadthing/blob/24d639ccba80e301342aeac2630ab34ec6746461/packages/uploadthing/src/types.ts#L23

Great, thanks for reply. But how do I use it. I tried following.

import type { ClientUploadedFileData } from 'uploadthing/client';

But still getting following error while building.

./src/components/file-upload.tsx:6:15
Type error: Module '"uploadthing/client"' declares 'ClientUploadedFileData' locally, but it is not exported.

  4 | import { Trash } from 'lucide-react';
  5 | import Image from 'next/image';
> 6 | import type { ClientUploadedFileData } from 'uploadthing/client';
    |               ^
  7 | import { IMG_MAX_LIMIT } from './forms/product-form';
  8 | import { Button } from './ui/button';
  9 | import { useToast } from './ui/use-toast';
 ELIFECYCLE  Command failed with exit code 1.
 ```

[juliusmarminge]

import it from uploadthing/types