`Named export 'useDropzone' not found` about uploadthing

[KastanDay]

I finally solved this issue by editing ./my-project/node_modules/@uploadthing/react/dist/index.mjs:119

- import { useDropzone } from "react-dropzone";
+ import pkg from 'react-dropzone';
+ const { useDropzone } = pkg;

This was suggested by the error message, and appears to work. Although it feels very wrong.

Better solutions welcomed!

[KastanDay]

Turns out I missed the giant warning in the docs: https://docs.uploadthing.com/nextjs/pagedir

If you're using the /pages directory in Next still, you HAVE TO DISABLE THE esmExternals FLAG:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    esmExternals: false, // THIS IS THE FLAG THAT MATTERS
  },
};
 
module.exports = nextConfig;

[fabianszabo]

Have you tried deleting your node_modules directory & lock-file and re-running npm install or pnpm install (depending on what you're using)? It might help.

[KastanDay]

@caketime Thanks for the suggestion (especially since I'm junior at front-end), but after deleting node_modules and package-lock.json and npm install I got the same error.

[fabianszabo]

@KastanDay Sorry to hear that it didn't help. React / Nextjs is also very new for me. There's lot's to learn 😄

So according to the bug report you shared, this issue comes up when react-dropzone get's into the server-side rendering part of the react app.

Maybe check if you have added uploadthing into something like a "getStaticProps" function. That was explained by theo in his web dev tutorial last month. I've also seen things being marked for server side rendering with the "use server" flag (although I don't fully understand that flag yet). Hopefully you can find the cause 🙏🏼