Named export 'useDropzone' not found

[KastanDay]

Experiencing this error after following documentation.

error - file:///Users/kastanday/code/githubs/vercel_t3_app/learning-t3/node_modules/@uploadthing/react/dist/index.mjs:119
import { useDropzone } from "react-dropzone";
         ^^^^^^^^^^^
SyntaxError: Named export 'useDropzone' not found. The requested module 'react-dropzone' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

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

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5) {
  digest: undefined
}

Might be related to this: react-dropzone/react-dropzone#1259
Apologies, I'm new to react and couldn't determine the proper fix from this thread.

[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 🙏🏼

[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;