React使用Uppy插件出现Super expression must either be null or a function报错

开发者阿泽

2026-9-30

报错原因&排查方案

这个报错在Uppy使用场景中90%由以下几个问题引发，按优先级排查即可：

优先确认所有Uppy相关依赖版本完全一致
不同步的版本会导致内部类继承逻辑异常，直接触发该报错，你可以先卸载现有Uppy依赖再统一安装同版本稳定包：
```
# 卸载旧依赖
npm uninstall @uppy/core @uppy/react @uppy/tus
# 安装同版本最新稳定依赖
npm install @uppy/core@latest @uppy/react@latest @uppy/tus@latest
```

补全代码缺失的必要配置
你当前代码漏了useUppy的依赖数组、DashboardModal的受控显隐属性、以及必要的样式导入，修改后的可用代码如下：

import Uppy from '@uppy/core';
import { DashboardModal, useUppy } from '@uppy/react';
import Tus from '@uppy/tus';
import React from 'react';
// 导入必要样式，漏加也会触发渲染异常
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';

const FileUploaderMulti = () => {
  // 第二个参数传入空依赖数组，保证Uppy实例只初始化一次
  const uppy = useUppy( () => {
    return new Uppy()
      .use( Tus, { endpoint: 'https://tusd.tusdemo.net/files' } );
  }, []);
  // DashboardModal为受控组件，需要open和onClose属性控制显隐
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>打开上传面板</button>
      <DashboardModal 
        uppy={uppy} 
        open={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      />
    </>
  );
};

export default FileUploaderMulti;