solid-start icon indicating copy to clipboard operation
solid-start copied to clipboard

Fails compiling Uploadcare

Open aquaductape opened this issue 3 years ago • 0 comments

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/>
    </>
  );
};

aquaductape avatar Nov 17 '22 22:11 aquaductape