Search code examples
javascriptvue.jsvuejs3vitetransloadit

Vite + Transloadit: Uncaught TypeError: Cannot read properties of undefined (reading 'Resolver')

I'm working on a Vite App (Vue 3.x) that makes use of Transloadit for some operations with images/PDFs. I'm running into some errors when adding the Transloadit library (I'm creating my own plugin wrapping Transloadit).

I already solved an error caused by Vite removing process by adding this:

define: {
    'process.versions': process.versions
  }

to my vite.config.js.

The error I now get is:

Uncaught TypeError: Cannot read properties of undefined (reading 'Resolver')
    at node_modules/cacheable-lookup/source/index.js (index.js:7)
    at __require2 (chunk-IHTDASF6.js?v=e96a9976:17)
    at node_modules/got/dist/source/core/index.js (index.js:12)
    at __require2 (chunk-IHTDASF6.js?v=e96a9976:17)
    at node_modules/got/dist/source/as-promise/types.js (types.js:14)
    at __require2 (chunk-IHTDASF6.js?v=e96a9976:17)
    at node_modules/got/dist/source/as-promise/index.js (index.js:16)
    at __require2 (chunk-IHTDASF6.js?v=e96a9976:17)
    at node_modules/got/dist/source/create.js (create.js:15)
    at __require2 (chunk-IHTDASF6.js?v=e96a9976:17)

Expanding the browser stack trace I get:

node_modules/cacheable-lookup/source/index.js   @   index.js:7
__require2  @   chunk-IHTDASF6.js?v=e96a9976:17
node_modules/got/dist/source/core/index.js  @   index.js:12
__require2  @   chunk-IHTDASF6.js?v=e96a9976:17
node_modules/got/dist/source/as-promise/types.js    @   types.js:14
__require2  @   chunk-IHTDASF6.js?v=e96a9976:17
node_modules/got/dist/source/as-promise/index.js    @   index.js:16
__require2  @   chunk-IHTDASF6.js?v=e96a9976:17
node_modules/got/dist/source/create.js  @   create.js:15
__require2  @   chunk-IHTDASF6.js?v=e96a9976:17
node_modules/got/dist/source/index.js   @   index.js:14
__require2  @   chunk-IHTDASF6.js?v=e96a9976:17
node_modules/transloadit/src/Transloadit.js @   Transloadit.js:1
__require2  @   chunk-IHTDASF6.js?v=e96a9976:17
node_modules/transloadit/index.js   @   index.js:1
__require2  @   chunk-IHTDASF6.js?v=e96a9976:17
(anonymous) @   dep:transloadit:1

My dependencies:

"dependencies": {
    "@auth0/auth0-spa-js": "1.18.0",
    "axios": "0.21.2",
    "transloadit": "3.0.2",
    "vue": "3.2.12",
    "vue-router": "4"
  }
Solution

  • I moved away from trying to use Transloadit directly in the frontend. I created an issue for the Transloadit team regarding this and they expressed that the library was meant to be used from a backend. I ended up using Uppy (uppy.io)[https://uppy.io/], which is made by the Transloadit team, and through Uppy I managed to use Transloadit. I would recommend this if you don't want to take care of implementing Transloadit yourself.