Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'Upload') - tus-js-client

Hello Stack Overflow Community,

I am working on a Next.js application where I need to upload videos to Vimeo. I'm using tus-js-client for the upload functionality. However, I'm encountering an error when trying to initialize a new tus upload.

The error message is:

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'Upload') - tus-js-client

code

import React, { useState } from 'react';
import { Button } from '@mui/material';
import tus from 'tus-js-client';

const VimeoUploadComponent = () => {
  const [videoFile, setVideoFile] = useState(null);

  // This function will be triggered when the user clicks 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;

    
    // Initialize a new tus upload
    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 occurs at the line where I try to create a new instance of tus.Upload. I've already ensured that tus-js-client is installed in my project. I'm not sure if I'm importing or using the Upload class incorrectly, or if it's an issue with how tus-js-client interacts with Next.js.

Has anyone encountered a similar issue or can offer any insights on how to resolve this? Any help or suggestions would be greatly appreciated!

Thank you!

I had this

import tus from 'tus-js-client';

changed to

import * as tus from 'tus-js-client';

Now its working