'Minify error after vite build with react-dropzone-uploader
I have migrate my app from cra to vite but now my dropzone uploader is not working and return me this error only in production
Its look like the error come from the Dropzone component but I can't explain why it work fine in development and was working with CRA
error: Uncaught Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
component:
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>
);
}
Solution 1:[1]
by me i create following file and use DropzoneFix component, and works:
// 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);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Chen |
