未处理的运行时错误 TypeError：无法读取未定义的属性（读取“上传”） - tus-js-client

Question

Stack Overflow 社区您好，

我正在开发一个 Next.js 应用程序，我需要将视频上传到 Vimeo。我使用 tus-js-client 来实现上传功能。但是，我在尝试初始化新的 tus 上传时遇到错误。

错误信息是：

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

代码

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;

问题发生在我尝试创建

tus.Upload

的新实例的行。我已经确保 tus-js-client 安装在我的项目中。我不确定我是否错误地导入或使用了 Upload 类，或者是否是 tus-js-client 与 Next.js 交互的问题。

有人遇到过类似的问题或可以提供有关如何解决此问题的任何见解吗？任何帮助或建议将不胜感激！

谢谢！

Answer 1

我有这个

import tus from 'tus-js-client';

更改为

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

现在可以工作了