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

Updating file extension name in ReactJS: A quick guide

Looking to modify a file name and extension within the react.js public folder. Changing index.html to index.php https://i.stack.imgur.com/zp1Ga.jpg ** ...

javascriptnode.jsreactjsreact-router

Update a separate React component in response to the interaction with a different React component

Currently, I am working with a react component named Interest Category that showcases an initial set of Interest categories. Another react component called CreateInterestCategoryDialog, which functions as a modal, is responsible for creating a new entity I ...

javascriptreactjsmaterial-ui

Trouble with scrolling on Kendo chart while using mobile device

I am facing an issue with multiple kendo charts on my website. These charts have panning and zooming enabled, but in the mobile view, they take up 100% of the width which causes touch events to not work properly for scrolling. I attempted to attach an even ...

javascriptangularjquery-mobilekendo-uikendo-chart

Problem with traversing from parent to children elements using jQuery selectors

<form data-v-c4600f50="" novalidate="novalidate" class="v-form"> <div data-v-c4600f50="" class="pr-2" question="Top Secret4"> <div data-v-c4600f50="" f ...

javascripthtmljquerycss

What methods are available to verify all my (JavaScript) AJAX calls when they are being sent to Node.js?

My web app sends hundreds of HTTP requests to a Node.js API I created. I need to ensure that only authenticated requests are accepted by Node.js. The issue at hand: I don't want to manually update each AJAX request in my JavaScript code to include a ...

javascriptjquerynode.jsajaxhttp

Order of execution for Angular 2 components

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; import {Router, ActivatedRoute, Params} from '@angular/router'; import { Country } from &ap ...

javascriptangulartypescript

How can I retrieve a Vuex data property from another Vuex data property?

In order to make color variables easily accessible throughout my Vue app, I have stored them in an array named "colors[]" within the Vuex store. This method works well when accessing the colors within component methods or inline styles. Now, I am storing ...

vue.jsvuex

Even in the face of errors, Selenium with Node.js continues to run seamlessly. The challenge arises specifically with the 107.xx version of the Chrome browser and Chrome driver

Currently, I am employed in a project involving NODE JS (javascript) with selenium webdriver. Package.json- “chai”: “^4.3.6”, “chromedriver”: “^107.0.3”, “geckodriver”: “^3.2.0”, “mocha”: “^10.0.0”, “mochawesome”: “^7. ...

javascriptnode.jsseleniumselenium-webdriverselenium-chromedriver

Setting a div's background using JavaScript works flawlessly on jsfiddle.net, but encounters issues when implemented in actual code

contains the files you need. For reference, here is the link to the code on I have attempted to remove all unnecessary elements from the actual project, but it has not made a difference. document.getElementById("image").style.backgroundImage = "url(" + d ...

javascripthtmlcss

Node.js captures the Promise and provides detailed feedback

As I embark on my journey with Node.js + Express, currently in the process of structuring my HTTP APIs, I have a controller that utilizes a specific pattern: my_controller.js 'use strict'; var AppApiFactory = function (express, appService) { ...

javascriptnode.jsexpresspromise

Responsive Alignment of Slanted Edges using CSS

I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...

javascripthtmlcssresponsivediagonal

Unusual Behavior of JavaScript for..in and enum

I'm facing an issue with the peculiar behavior of the for..in loop in JavaScript. Here's the structure of my HTML: <div id="quarter_circle_top_left">...</div> <div id="quarter_circle_top_right">...</div> <div id="quart ...

javascriptjquery

The setState function in React Native seems to be having trouble updating

I've been attempting to access state from a component, but for some reason, I'm not seeing any changes when I use setState(). Here is the current state of my component: class MyTestComponent extends React.Component { constructor(props){ ...

javascriptreactjsreact-nativestate

The alertify.alert function encounters issues when used within the response of a mithril m.request

I'm currently working on a project utilizing mithril.js and also integrating alertify.js. I am encountering an issue when trying to alert some data in the response. Strangely, it doesn't work as expected. However, if I use the same alert function ...

javascriptjqueryajaxmithril.jsalertify

Having trouble setting the image source in HTML with Node.js

I am a beginner with nodeJS and I am having trouble setting the src attribute of an img tag in my client side html. My node server is running on port 3000 and everything works fine when I visit http://localhost:3000. Here is the code from my server.js fil ...

javascripthtmlnode.jssocket.io

Encountering an issue when bundling an application using electron-forge: "Unable to find solution for './→' "

Having trouble packaging my Electron application using electron-forge. It seems like the issue lies with native modules such as 'sqlite3'. Upon running the command npm run package, I encounter this error: Module not found: Error: Can't reso ...

javascriptnode.jswebpackelectronelectron-forge

TinyMCE - Utilizing selection.setContent along with getContent for the Warp Button

I am looking to implement a button that will wrap content with all tags. Snippet of Code: editor.addButton('MobileToggleArea', { text: '<M>', icon: false, onclick: function (){ editor.selection. ...

javascriptjqueryhtmltinymcetinymce-4

IE encounters issues making Ajax calls when transitioning from secure HTTPS requests to insecure HTTP requests

I am currently facing an issue with my ajax CORS request. It is functioning perfectly on all browsers except for Internet Explorer. In IE, the request doesn't even attempt to go through and fails instantly without any error messages appearing in the c ...

javascriptjqueryajaxinternet-explorer

Creating a View-Model for a header bar: A step-by-step guide

I am looking to develop a View-Model for the header bar using WebStorm, TypeScript, and Aurelia. In my directory, I have a file named header-bar.html with the following code: <template bindable="router"> <require from="_controls/clock"></ ...

javascriptangulartypescriptwebstormaurelia

Stop the sudden jump when following a hashed link using jQuery

Below is the code snippet I am working with: $( document ).ready(function() { $( '.prevent-default' ).click(function( event ) { event.preventDefault(); }); }); To prevent the window from jumping when a hashed anchor ...

javascriptjqueryhtmlcss