Next.js中使用tus-js-client调用Upload时报错求助

错误信息 #

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

问题说明 #

在开发Next.js应用时，需要通过tus-js-client实现视频上传至Vimeo的功能，但初始化tus.Upload实例时触发上述错误。已确认项目已安装tus-js-client，不确定是导入/使用方式错误，还是与Next.js存在兼容问题。

代码片段 #

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

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

  const handleUpload = async () => {
    console.log("clicked")
    if (!videoFile) {
      alert('Please select a file first.');
      return;
    }

    const accessToken = process.env.NEXT_PUBLIC_VIDEO_KEY;
    
    // 触发错误的代码行
    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-js-client的ESM模块导出结构可能与默认导入不匹配，改用命名导入：

  // 替换原导入语句
  import { Upload } from 'tus-js-client';
  // 初始化时直接使用
  var upload = new Upload(videoFile, { /* 配置项 */ });
  

  若存在CommonJS与ESM兼容问题，可尝试动态导入：

  const { Upload } = await import('tus-js-client');
  

• 处理Next.js SSR特性：tus-js-client依赖浏览器环境的API，Next.js服务端渲染时会导致初始化失败。在Next.js 13+版本中，可在组件文件顶部添加客户端组件标识：

  'use client';
  

  或在初始化前判断是否处于浏览器环境：

  if (typeof window !== 'undefined') {
    const { Upload } = require('tus-js-client');
    var upload = new Upload(videoFile, { /* 配置项 */ });
  }
  

• 验证依赖完整性：尝试重新安装tus-js-client，确保依赖包未损坏：

  npm uninstall tus-js-client
  npm install tus-js-client
  

• 检查版本兼容性：确认tus-js-client版本与当前Next.js版本适配，可尝试降级/升级tus-js-client版本测试。

内容的提问来源于stack exchange，提问作者umair mehmood