solid-start
solid-start copied to clipboard
Fails compiling Uploadcare
Fails compiling Uploadcare https://uploadcare.com/docs/uploads/file-uploader/#npm.
For example at a route page, user imports uploadcare
import { onMount } from "solid-js";
import uploadcare from "uploadcare-widget";
const Home = () => {
let uploadcareRef!: HTMLInputElement;
onMount(() => {
const widget = uploadcare.Widget(uploadcareRef, {
publicKey: "",
});
});
return (
<>
<input ref={uploadcareRef} type="hidden" />
</>
);
};
export default Home;
Results in Error
An error occured while server rendering /home:
$__default.default.extend is not a function
TypeError: $__default.default.extend is not a function
at /Users/caleb/Documents/work/project/node_modules/.pnpm/[email protected]/node_modules/uploadcare-widget/uploadcare.js:1367:43
at /Users/caleb/Documents/work/project/node_modules/.pnpm/[email protected]/node_modules/uploadcare-widget/uploadcare.js:11:83
at Object.<anonymous> (/Users/caleb/Documents/work/project/node_modules/.pnpm/[email protected]/node_modules/uploadcare-widget/uploadcare.js:14:3)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async nodeImport (file:///Users/caleb/Documents/work/project/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-c842e491.js:54315:21)
at async eval (/Users/caleb/Documents/work/project/src/containers/Profile/EditProfile.tsx:10:0)
at async instantiateModule (file:///Users/caleb/Documents/work/project/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-c842e491.js:54236:9
A workaround is to use lazy import
import { onMount } from "solid-js";
import uploadcare from "uploadcare-widget";
const UploadCare = () => {
let uploadcareRef!: HTMLInputElement;
onMount(() => {
const widget = uploadcare.Widget(uploadcareRef, {
publicKey: "",
});
});
return (
<>
<div>hi</div>
<input ref={uploadcareRef} type="hidden" />
</>
);
};
export default UploadCare;
// ------------------------------------------------------
const UploadCare = lazy(() => import("./UploadCare"));
const Page = () => {
return (
<>
<UploadCare/>
</>
);
};