reactjs - 使用react-dropzone-uploader 缩小vite 构建后的错误

Question

我已将我的应用程序从 cra 迁移到 vite，但现在我的 dropzone uploader 无法正常工作，并且仅在生产中返回此错误

它看起来像是来自 Dropzone 组件的错误，但我无法解释为什么它在开发中工作正常并且与 CRA 一起工作

错误: Uncaught Error :缩小的 React 错误 #130；访问 https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]=获取完整消息，或使用非缩小开发环境获取完整错误和其他有用的警告。

组件:

import Dropzone from "react-dropzone-uploader";
import api from "../../../Service/API/API";

import {lang} from "../../../Service/Translator";
import "../../../App.css"

export function UploadBox({update, closeAfterUpload, onClose, body, url, disabled}) {

   const getUploadParams = ({file, meta}) => {
      const body = new FormData()
      for (let k of Object.keys(body)) {
         body.append(k, body[k])
      }

      body.append('title', file.name.split(".")[0])
      body.append('file', file)

      return {
         url: `${api.getURL()}${url ? url : 'user/files'}`,
         body: body,
         field: {},
         headers: {Authorization: `Bearer ${api.Auth.getAccessToken()}`},
         meta: meta
      }
   }

   // called every time a file's `status` changes
   const handleChangeStatus = ({meta, file, xhr}, status) => {
      if (status === 'done') {
         let response = JSON.parse(xhr.response)
         meta.id = response.id

         api.snackAction(lang.UploadSucceed.replace('{0}', meta.name), "success")

         update ? update() : null

         if (closeAfterUpload) {
            onClose()
         }
      } else if (status === 'aborted') {
         api.snackAction(lang.UploadAborted.replace('{0}', meta.name), "warning")

      } else if (status === 'error_upload') {
         api.snackAction(lang.UploadError.replace('{0}', meta.name), "error")

      } else if (status === 'rejected_file_type') {
         api.snackAction(lang.UploadRejectedFileType, "Warning")

      } else if (status === 'removed') {
         api.Enterprise
            .Files
            .delete(meta.id)
            .then(() => {
               update ? update() : null
            })

      }

   }

   return (
      <div>
         <Dropzone
            disabled={disabled}
            body={body}
            getUploadParams={getUploadParams}
            onChangeStatus={handleChangeStatus}
            classNames={"preview_darkmode"}
            maxSizeBytes={Math.pow(2, 30)}
            // onSubmit={this.handleSubmit}
            accept="image/*,.pdf"
         />

      </div>
   );

}

Answer 1

由我创建以下文件并使用 DropzoneFix 组件，并且有效:

// DropzoneFix.tsx
import Dropzone from 'react-dropzone-uploader';
function fixComponent<T>(component: T): T {
    return (component as any).default ?? component;
}
export const DropzoneFix = fixComponent(Dropzone);