Vite and Transloadit encountered a type error: Unable to access properties of undefined when trying to read 'Resolver'

Currently, I am developing a Vite application using Vue 3.x that involves interactions with images/PDFs through Transloadit. While working on creating my own plugin for Transloadit integration, I encountered some issues.

Initially, I managed to resolve an error caused by Vite removing process by implementing the following in my vite.config.js:

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

However, I am now facing a new error:

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)

The expanded browser stack trace is as follows:

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

Listed below are 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"
  }
javascriptvue.jsvuejs3vitetransloadit

Answer №1

After realizing that using Transloadit directly in the frontend wasn't ideal, I reached out to the Transloadit team for help. They suggested that their library is best suited for backend use. Instead, I turned to Uppy, a tool created by the Transloadit team, which allowed me to successfully integrate Transloadit into my project. For anyone looking to avoid the hassle of implementing Transloadit on their own, I highly recommend using Uppy.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate the 'noty' javascript library into your Rails 5 project

I am currently attempting to integrate noty.js, a notification library found at , into my Rails application. After installing it using npm: npm install noty I can see the library under node_modules. When I try to implement it in a JavaScript file like t ...

javascriptjqueryruby-on-railsrubynpm

Mandatory press for a function known as a click

After dealing with a previous question on this matter, I have encountered yet another issue. My goal is to rotate an element clockwise by 22 degrees and then back to its initial state of 0 degrees on click. The first function executes correctly, but the ...

javascriptrotation

The pagination feature in React MUI DataGrid is malfunctioning

I am currently working with a datagrid and implementing server-side pagination. I have set a limit of 5 objects to be returned from the backend, and an offset variable to indicate from which index the next set of data should come. const handlePageChange = ...

javascriptreactjsmaterial-uidatagrid

Attempting to transfer a username String from the client to the server using React and Typescript

I am working on a project where I need to send the username of a logged-in user from the Client to the Server as a string. Currently, I am able to successfully send an image file, but now I also need to send a string along with it. What I aim to do is repl ...

javascriptreactjstypescript

Changing focus to 'DIV' element without JQuery using Javascript and Angular's ng-click event

Instructions for using an Angular directive to set focus on a "DIV" element when clicked <a href="#" class="skipToContent" ng-click="showContent()" title="skip-to-main-content">Skip To Main Content</a> <div class="getFocus" role="button" ...

javascripthtmlangularjssetfocus

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

Maintain the div in its current location when zooming the map

I created a multi-layer map and added a div to it. However, the issue arises when I zoom in on the image, causing the div to change its position unexpectedly. For example, if I place the div over India and then zoom and drag the image, the div ends up in U ...

javascripthtmlscrollhtml5-canvas

What is the best way to merge and nest connected JSON elements?

I am working with two separate JSON files that I need to merge into one single JSON object for use on the frontend of my project. fragments.json [ { "id": 2, "title": "John Smith is nice", "reports& ...

javascriptnode.jsjsonexpress

React Native: The function `useContext.getItemsCount()` is returning a value of undefined, which is not an object

As a newcomer to React Native, I encountered an error when calling getItemsCount. *To view images, please click on the following links: https://i.sstatic.net/wbwjZ.png This snippet shows the code for CartIcon.js: import React, {useContext} from 'r ...

javascriptreact-native

Datatables stands out by emphasizing rows across all paginated pages

Encountering an issue with the Datatables plugin when attempting to highlight rows on paginated pages beyond the first one. In the JavaScript code below, you can see where I have commented out adding the class info to all rows. When this is done and you n ...

javascriptjquerydatatables

What is the best way to invoke a component method from an event listener of a different component using ($on)?

I recently came across information on Non-Parent-Child Communication at https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication, which explains the concept of using bus events to communicate between components. However, I'm still ...

javascriptvue.jsvuejs2vue-component

Switch button while moving cursor

I'm struggling with getting this 2048x512 image, which has 4 stages of transition, to work properly. https://i.sstatic.net/1PBvX.png While I know how to switch it to the final stage on hover, I can't seem to figure out how to incorporate a trans ...

javascriptjquerycsscss-transitions

HTML Option Absent from Blend VS2013

After recently installing VS2013 Pro in Office, I was excited to use Blend and its HTML Option. However, I am struggling to find a way to start an application with html as shown in videos. My goal was to utilize Blend for creating prototypes using html. D ...

javascripthtmlvisual-studio-2013blend

The data I am trying to obtain is not being returned by my hook as expected

I am trying to create a hook that fetches all properties from a database. The function I have is asynchronous, and when I call the hook in another function, it returns an empty array []. I understand that fetching data from the database is an asynchronous ...

javascriptreactjsasynchronousreact-hooks

Angular dynamically selects a dropdown option when the page is loaded

Check out this dropdown example: <div class="col-md-6"> <div class="form-group> <label class="control-label">Role</label> < ...

javascriptjqueryangularjs

Is it necessary for me to set up @types/node? It appears that VSCode comes with it pre-installed

Many individuals have been adding @types/node to their development dependencies. Yet, if you were to open a blank folder in VSCode and create an empty JavaScript file, then input: const fs = require('fs'); // <= hover it and the type display ...

javascripttypescriptvisual-studio-code

Accessing JavaScript results in PHP

Hello everyone! I am working on creating a dropdown menu for selecting time using JavaScript to get the computer's current time. My goal is to have an output that automatically selects the option in the dropdown if it matches the computer's time. ...

phpjavascripthtml

Utilizing background styles for enhancing the appearance of Ionic side menus

I've been experimenting with ionic and angular.js, trying to figure out the best way to apply background styles to side menus. I currently have a blurred background image with content boxes placed on top of it. My goal is to keep the background fixed ...

javascripthtmlcssangularjsionic-framework

The method item.appendChild does not exist as a function

Despite being a common error, I've researched extensively and still can't figure out why it's happening. It seems like it should be an easy fix, but I'm struggling to find the solution on my own. var item = document.createElement("div" ...

javascripthtmlcssdom

What is the best way to choose a date and time in a custom format within my React application?

I'm currently developing the front-end of my application using React. I am looking for a way to capture the date and time in the specific format shown in this image. Any suggestions or solutions would be greatly appreciated! ...

javascripthtmljqueryreactjsfrontend