uploadthing icon indicating copy to clipboard operation
uploadthing copied to clipboard
verified publisher icon pingdotgg

[bug]: UploadThing packages fail to compile with Next.js 16 Turbopack mode

Open hyper-lode opened this issue 2 months ago • 8 comments

Provide environment information

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.21 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.5.0 - /Users/hal8/.nvm/versions/node/v24.5.0/bin/node
    npm: 11.6.0 - /Users/hal8/.nvm/versions/node/v24.5.0/bin/npm
    bun: 1.2.18 - /Users/hal8/.bun/bin/bun
  Browsers:
    Chrome: 141.0.7390.108
    Edge: 141.0.3537.92
    Firefox: 144.0
    Safari: 26.0.1
  npmPackages:
    @uploadthing/react: ^7.3.3 => 7.3.3 
    typescript: ^5.9.3 => 5.9.3 
    uploadthing: ^7.7.4 => 7.7.4

Describe the bug

When running Next.js 16 with Turbopack (the default in Next.js 16), UploadThing packages fail to compile with multiple module resolution and parsing errors. The application crashes on startup when trying to compile any page that imports UploadThing components.

Expected Behavior: UploadThing should work seamlessly with Next.js 16's Turbopack bundler.

Actual Behavior: The dev server fails to compile pages that use UploadThing, throwing multiple errors related to:

  • Unknown module types for README.md and LICENSE files
  • ECMAScript parsing errors in LICENSE files
  • Module format mismatches (CommonJS vs ESM) in .cts files
  • Missing .cjs file resolution

Link to reproduction

https://stackblitz.com/github/pingdotgg/uploadthing/tree/main/examples/minimal-appdir

To reproduce

  1. Create a Next.js 16 project (or upgrade existing project to Next.js 16)
  2. Install UploadThing: npm install uploadthing @uploadthing/react
  3. Import and use any UploadThing component (e.g., in a page component)
  4. Run npm run dev (Next.js 16 uses Turbopack by default)
  5. Navigate to a page that uses UploadThing
  6. Observe compilation errors

Additional information

Error Output

⨯ ./node_modules/@uploadthing/mime-types/README.md
Unknown module type
This module doesn't have an associated type. Use a known file extension, or register a loader for it.

⨯ ./node_modules/@uploadthing/react/README.md
Unknown module type
This module doesn't have an associated type. Use a known file extension, or register a loader for it.

⨯ ./node_modules/@uploadthing/mime-types/LICENSE:1:6
Parsing ecmascript source code failed
> 1 | (The MIT License)
    |      ^^^
Expected ',', got 'MIT'

⨯ ./node_modules/@uploadthing/react/LICENSE:1:5
Parsing ecmascript source code failed
> 1 | MIT License
    |     ^^^^^^^
Expected ';', '}' or <eof>

⨯ ./node_modules/@uploadthing/mime-types/application/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)

⨯ ./node_modules/@uploadthing/react/dist/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)

⨯ ./node_modules/@uploadthing/react/native/index.d.cts:1:1
Module not found: Can't resolve '../dist/use-uploadthing-BnX8QvFV.cjs'

⨯ ./node_modules/@uploadthing/react/dist/index.d.cts:1:1
Module not found: Can't resolve './use-uploadthing-BnX8QvFV.cjs'

Suggested Fix

The UploadThing package may need to:

  1. Exclude non-code files (README.md, LICENSE) from being processed by bundlers
  2. Ensure CommonJS type definition files (.d.cts) properly align with the actual module format
  3. Verify that all referenced .cjs files exist in the distributed package
  4. Add explicit Turbopack compatibility testing to CI/CD pipeline

👨‍👧‍👦 Contributing

  • [ ] 🙋‍♂️ 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

hyper-lode avatar Oct 24 '25 04:10 hyper-lode

Just tested on Next.js 16.0.1 (Turbopack), still gives the errors:

Image Image

hyper-lode avatar Oct 29 '25 06:10 hyper-lode

Please is this being worked on? what's the progress to it getting fixed, i face the same issue after trying to upgrade my next app to 16.0.1

Ableez avatar Oct 29 '25 21:10 Ableez 

./node_modules/@uploadthing/dropzone/solid/index.cjs:4:15
Module not found: Can't resolve 'solid-js'
  2 |
  3 | var fileSelector = require('file-selector');
> 4 | var solidJs = require('solid-js');
    |               ^^^^^^^^^^^^^^^^^^^
  5 | var store = require('solid-js/store');
  6 | var core = require('@uploadthing/dropzone/core');
  7 |



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/solid/index.js:2:1
Module not found: Can't resolve 'solid-js'
  1 | import { fromEvent } from 'file-selector';
> 2 | import { mergeProps, createMemo, createSignal, createEffect, onCleanup } from 'solid-js';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | import { createStore } from 'solid-js/store';
  4 | import { acceptPropAsAcceptAttr, initialState, isEventWithFiles, isPropagationStopped, allFilesAccepted, noop, isEnterOrSpace, isIeOrEdge, isFileAccepted, isValidSize, isValidQuantity } from '@uploadthing/dropzone/core';
  5 |



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/solid/index.cjs:5:13
Module not found: Can't resolve 'solid-js/store'
  3 | var fileSelector = require('file-selector');
  4 | var solidJs = require('solid-js');
> 5 | var store = require('solid-js/store');
    |             ^^^^^^^^^^^^^^^^^^^^^^^^^
  6 | var core = require('@uploadthing/dropzone/core');
  7 |
  8 | function createDropzone(_props) {



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/solid/index.js:3:1
Module not found: Can't resolve 'solid-js/store'
  1 | import { fromEvent } from 'file-selector';
  2 | import { mergeProps, createMemo, createSignal, createEffect, onCleanup } from 'solid-js';
> 3 | import { createStore } from 'solid-js/store';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 | import { acceptPropAsAcceptAttr, initialState, isEventWithFiles, isPropagationStopped, allFilesAccepted, noop, isEnterOrSpace, isIeOrEdge, isFileAccepted, isValidSize, isValidQuantity } from '@uploadthing/dropzone/core';
  5 |
  6 | function createDropzone(_props) {



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/svelte/index.cjs:4:14
Module not found: Can't resolve 'svelte'
  2 |
  3 | var fileSelector = require('file-selector');
> 4 | var svelte = require('svelte');
    |              ^^^^^^^^^^^^^^^^^
  5 | var store = require('svelte/store');
  6 | var core = require('@uploadthing/dropzone/core');
  7 |



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/svelte/index.js:2:1
Module not found: Can't resolve 'svelte'
  1 | import { fromEvent } from 'file-selector';
> 2 | import { onMount } from 'svelte';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | import { writable, derived, get } from 'svelte/store';
  4 | import { acceptPropAsAcceptAttr, initialState, reducer, isEventWithFiles, isPropagationStopped, allFilesAccepted, noop, isEnterOrSpace, isIeOrEdge, isFileAccepted, isValidSize, isValidQuantity } from '@uploadthing/dropzone/core';
  5 |



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/svelte/index.cjs:5:13
Module not found: Can't resolve 'svelte/store'
  3 | var fileSelector = require('file-selector');
  4 | var svelte = require('svelte');
> 5 | var store = require('svelte/store');
    |             ^^^^^^^^^^^^^^^^^^^^^^^
  6 | var core = require('@uploadthing/dropzone/core');
  7 |
  8 | function reducible(reducer, state) {



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/svelte/index.js:3:1
Module not found: Can't resolve 'svelte/store'
  1 | import { fromEvent } from 'file-selector';
  2 | import { onMount } from 'svelte';
> 3 | import { writable, derived, get } from 'svelte/store';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 | import { acceptPropAsAcceptAttr, initialState, reducer, isEventWithFiles, isPropagationStopped, allFilesAccepted, noop, isEnterOrSpace, isIeOrEdge, isFileAccepted, isValidSize, isValidQuantity } from '@uploadthing/dropzone/core';
  5 |
  6 | function reducible(reducer, state) {



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/vue/index.cjs:4:11
Module not found: Can't resolve 'vue'
  2 |
  3 | var fileSelector = require('file-selector');
> 4 | var vue = require('vue');
    |           ^^^^^^^^^^^^^^
  5 | var core = require('@uploadthing/dropzone/core');
  6 |
  7 | function useDropzone(options) {



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/dropzone/vue/index.js:2:1
Module not found: Can't resolve 'vue'
  1 | import { fromEvent } from 'file-selector';
> 2 | import { ref, watch, computed, reactive, onMounted, onUnmounted, toRefs } from 'vue';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | import { acceptPropAsAcceptAttr, initialState, isEventWithFiles, isPropagationStopped, allFilesAccepted, noop, isEnterOrSpace, isIeOrEdge, isFileAccepted, isValidSize, isValidQuantity } from '@uploadthing/dropzone/core';
  4 |
  5 | function useDropzone(options) {



https://nextjs.org/docs/messages/module-not-found

Ableez avatar Oct 29 '25 21:10 Ableez

For me it was the mark to migrate off... better upload + s3 is almost a drop in replacement (and much cheaper)

For me uploadthing was solving one thing: I didn't need to think about it. It was made for the tools I use by devs who also use's them. I feel that's no longer the case.

MendyLanda avatar Oct 29 '25 21:10 MendyLanda

We are working with Vercel to find a path forward on this. It seems that it may be an edge case in Turbopack, and not an issue with Uploadthing packages specifically.

markflorkowski avatar Oct 29 '25 22:10 markflorkowski

Are you guys using the tailwind v3 integration?

As a workaround you can try using the plugin directly and manually specifying the content paths, instead of the withUt helper:

// tailwind.config.ts
import { uploadthingPlugin } from 'uploadthing/tw'

export default {
  content: [
    // your other paths
    './node_modules/@uploadthing/react/dist/**'
  ],
  plugins: [
    // your other plugins
    uploadthingPlugin,
  ]
}

juliusmarminge avatar Oct 29 '25 23:10 juliusmarminge

I'm also getting this issue and unable to upgrade to Next 16 because of this.

⨯ ./node_modules/@uploadthing/mime-types/README.md
Unknown module type
This module doesn't have an associated type. Use a known file extension, or register a loader for it.

Read more: https://nextjs.org/docs/app/api-reference/next-config-js/turbo#webpack-loaders



./node_modules/@uploadthing/react/README.md
Unknown module type
This module doesn't have an associated type. Use a known file extension, or register a loader for it.

Read more: https://nextjs.org/docs/app/api-reference/next-config-js/turbo#webpack-loaders



./node_modules/@uploadthing/mime-types/LICENSE:1:6
Parsing ecmascript source code failed
> 1 | (The MIT License)
    |      ^^^
  2 |
  3 | Copyright (c) 2014 Jonathan Ong <[email protected]>
  4 | Copyright (c) 2015 Douglas Christopher Wilson <[email protected]>

Expected ',', got 'MIT'



./node_modules/@uploadthing/react/LICENSE:1:5
Parsing ecmascript source code failed
> 1 | MIT License
    |     ^^^^^^^
  2 |
  3 | Copyright (c) 2024 Ping Labs
  4 |

Expected ';', '}' or <eof>



./node_modules/@uploadthing/shared/LICENSE:1:5
Parsing ecmascript source code failed
> 1 | MIT License
    |     ^^^^^^^
  2 |
  3 | Copyright (c) 2024 Ping Labs
  4 |

Expected ';', '}' or <eof>



./node_modules/@uploadthing/mime-types/application/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/mime-types/audio/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/mime-types/dist/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/mime-types/image/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/mime-types/text/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/mime-types/video/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/react/dist/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/react/dist/use-uploadthing-BnX8QvFV.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/react/native/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/react/next-ssr-plugin/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/shared/dist/index.d.cts
Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)
The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code.
The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file.
In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.



./node_modules/@uploadthing/react/native/index.d.cts:1:1
Module not found: Can't resolve '../dist/use-uploadthing-BnX8QvFV.cjs'
> 1 | import { __useUploadThingInternal, generateReactHelpers } from "../dist/use-uploadthing-BnX8QvFV.cjs";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export { __useUploadThingInternal, generateReactHelpers };



https://nextjs.org/docs/messages/module-not-found



./node_modules/@uploadthing/react/dist/index.d.cts:1:1
Module not found: Can't resolve './use-uploadthing-BnX8QvFV.cjs'
> 1 | import { GenerateTypedHelpersOptions, UploadthingComponentProps, UseUploadthingProps, generateReactHelpers } from "./use-uploadthing-BnX8QvFV.cjs";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | import * as react_jsx_runtime4 from "react/jsx-runtime";
  3 | import { FileRouter } from "uploadthing/types";
  4 | import { ContentField, DropzoneOptions, ErrorMessage, StyleField } from "@uploadthing/shared";```

feldrok avatar Nov 08 '25 17:11 feldrok

Are there any updates on that? Also we need to remove "unconfirmed" label from this I think, a lot of people are having this issue.

xyrolle avatar Nov 11 '25 22:11 xyrolle