Greetings to the amazing Stack Overflow Community!
Currently, I'm developing a Next.js application that requires me to upload videos to Vimeo. To achieve this functionality, I've implemented tus-js-client for handling the uploads. However, I'm facing an error while attempting to initialize a new tus upload process.
The specific error message I'm encountering is:
An Unhandled Runtime Error of TypeError: Cannot read properties of undefined (reading 'Upload') - tus-js-client
Here's the code snippet:
import React, { useState } from 'react';
import { Button } from '@mui/material';
import tus from 'tus-js-client';
const VimeoUploadComponent = () => {
const [videoFile, setVideoFile] = useState(null);
// Triggered upon clicking the upload button
const handleUpload = async () => {
console.log("clicked")
if (!videoFile) {
alert('Please select a file first.');
return;
}
const accessToken = process.env.NEXT_PUBLIC_VIDEO_KEY;
// Initializing a new tus upload instance
var upload = new tus.Upload(videoFile, {
endpoint: "https://api.vimeo.com/me/videos",
retryDelays: [0, 1000, 3000, 5000],
metadata: {
filename: videoFile?.name,
filetype: videoFile?.type
},
headers: {
Authorization: `bearer ${accessToken}`,
Accept: "application/vnd.vimeo.*+json;version=3.4",
},
uploadSize: videoFile?.size,
onError: function(error) {
console.error("Failed because: " + error)
},
onProgress: function(bytesUploaded, bytesTotal) {
var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
console.log(bytesUploaded, bytesTotal, percentage + "%")
},
onSuccess: function() {
console.log("Download %s from %s", upload.file.name, upload.url)
}
});
console.log("uploaded file", accessToken)
// upload.start();
};
const handleFileChange = (event) => {
console.log("handling file")
const file = event.target.files[0];
if (file) {
console.log("selected file", file)
setVideoFile(file);
}else{
console.log("not selected")
}
};
return (
<div>
<input
accept="video/*"
style={{ display: 'none' }}
id="raised-button-file"
type="file"
onChange={handleFileChange}
/>
<label htmlFor="raised-button-file">
<Button variant="raised" component="span">
Choose File
</Button>
</label>
<Button
variant="contained"
onClick={handleUpload}
>
Upload to Vimeo
</Button>
</div>
);
};
export default VimeoUploadComponent;
The issue arises at the moment of creating a new instance of tus.Upload. I have double-checked the installation of tus-js-client in my project. Unsure if there's an incorrect import or usage of the Upload class, or perhaps it is related to how tus-js-client interacts with Next.js.
If anyone has faced a similar problem or can provide any insights on resolving this issue, your assistance and suggestions would be immensely valuable!
Thank you all for your support!