NextJS + `vite dev` run-time error: `Uncaught TypeError: trim_canvas.default is not a function`

[andrefpoliveira]

maintainer edit: This issue has gotten a little popular, please see a summary of the root cause and workarounds in the below linked comments:

• Next.js
• Vite

---

Hey! I'm probably doing something wrong but I can't figure out what...

I have a Next JS app and I have the following object:

"use client";
import { useRef } from "react";
import SignatureCanvas from "react-signature-canvas";

export default function SignaturePad({ onSave }) {
    const sigCanvas = useRef(null);

    const clear = (event) => {
        event.preventDefault();
        sigCanvas.current.clear();
        onSave(null);
    };

    const strokeFinished = (event) => {
        event.preventDefault();
        const dataURL = sigCanvas.current.getTrimmedCanvas().toDataURL("image/png");
        onSave && onSave(dataURL); // Send to parent component
    };

    return (
        <fieldset className="fieldset w-full">
            <legend className="fieldset-legend">Assinatura</legend>
            <div className="border-1 rounded-md input w-full h-[150px] cursor-crosshair">
                <SignatureCanvas
                    ref={sigCanvas}
                    penColor="black"
                    onEnd={strokeFinished}
                    canvasProps={{ className: "w-full h-[150px] rounded-md"}}
                />
            </div>
            <div className="flex space-x-2">
                <button onClick={clear} className="btn btn-primary w-full mt-2">
                    Limpar
                </button>
            </div>
        </fieldset>
    );
}

However, I'm getting this error:

Uncaught TypeError: p is not a function
  at e.getTrimmedCanvas (145-1f8f2f744481203b.js:1:12839)
  at f.onEnd (page—-dda8c99f385158aa.js:1:2153)
  at f._strokeEnd (145-1f8f2f744481203b.js:1:6137)
  at HTMLCanvasElement._handleTouchEnd (145-1f8f2f744481203b.js:1:3327)

Does anyone know how to fix this? Thanks!

[agilgur5]

Uncaught TypeError: p is not a function
  at e.getTrimmedCanvas (145-1f8f2f744481203b.js:1:12839)

const dataURL = sigCanvas.current.getTrimmedCanvas().toDataURL("image/png");

So nearly identical code is used in the example, which works fine in multiple variations.

Like #129, which duplicates this, I'm guessing that this is a build issue with NextJS.
The error message here looks like it's from a minified file, making this sound similar to #95, which was a bug upstream in Next.js / SWC. Does turning off minification make this work?

Per #129, it seems that downgrading to v1.0.6 of react-signature-canvas somehow fixes this.

If you can provide a full reproduction, including your package.json and lockfile to match exact versions, I can try to analyze the build sequence.

misc notes

Do you have any relation to the author of #129? Or is there a guide you were copying from? Curious how something that similar happened almost simultaneously -- your issues were filed ~an hour apart

Please use text/code blocks for logs instead of screenshots as they are much more accessible. I manually put your screenshot through OCR with tesseract.js and copied the text in order to be able to quote it (and edited it into your comment).

    const strokeFinished = (event) => {
        event.preventDefault();
        const dataURL = sigCanvas.current.getTrimmedCanvas().toDataURL("image/png");
        onSave && onSave(dataURL); // Send to parent component
    };

Regarding this part of your code, I would suggest having a separate "Save" button that triggers this instead of using the onEnd callback. This would also match your existing naming of your onSave callback.
Typically it is not necessary to have intermediate signatures (and they may not be legally valid until complete), so creating a blob and sending it to the parent on every stroke would be fairly inefficient (could cause noticeable lag too as the canvas is latency sensitive as is click/touch input) and possibly confusing/misleading given the onSave naming.

[A6Brgeuka]

i have the same error

index.tsx:88 Uncaught TypeError: (0 , import_trim_canvas.default) is not a function
    at SignatureCanvas2._this.getTrimmedCanvas (index.tsx:88:12)
    at SignaturePad.onEnd (SignatureComponent.tsx:28:22)
    at SignaturePad._strokeEnd (signature_pad.mjs:314:10)
    at SignaturePad._handleMouseUp (signature_pad.mjs:153:12)

 getTrimmedCanvas = (): HTMLCanvasElement => {
    // ...
    return trimCanvas(copy); // <- trimCanvas is not a function;
}

downgrading to v1.0.7 fixes this but there are no types.

[agilgur5]

downgrading to v1.0.7 fixes this but there are no types.

You can use @types/react-signature-canvas for versions prior to v1.1.x, particularly for v1.0.x.

i have the same error

Per my above comment, can you please provide a minimal reproduction? Were you also using NextJS?

index.tsx:88 Uncaught TypeError: (0 , import_trim_canvas.default) is not a function

The unminified, source-mapped output here is helpful at least. If this is identical to the above, that would suggest that NextJS's esModuleInterop is not quite working correctly with the trim-canvas import. Specifically, that it's missing the __importDefault helper when using ESM.

trim-canvas was published ~9 years ago and predates the official ESM spec, so it is published as CJS, or UMD more specifically. It has a single default export which is expressed in UMD. This has worked fine with CJS et al in the past and the new version also works fine with certain ESM loaders like Parcel for the example demos and whatever other existing users are using.
I'm not sure what NextJS is doing under-the-hood, but it seems to have a bug loading UMD modules like trim-canvas that are dependencies of an ESM module like react-signature-canvas.

As this is specific to importing trim-canvas, you can avoid this by not using getTrimmedCanvas()

[agilgur5]

I've created a NextJS minimal reproduction myself that confirms my above comment: https://stackblitz.com/~/github.com/agilgur5/rsc-issue-128

This is reproducible with next dev, which outputs an unminified stack trace:

Unhandled Runtime Error
TypeError: trim_canvas__WEBPACK_IMPORTED_MODULE_8__ is not a function

Source

SignatureCanvas._this.getTrimmedCanvas
  node_modules/react-signature-canvas/dist/index.mjs (67:13)

app/page.tsx (17:24) @ getTrimmedCanvas

  15 | 
  16 |   setTrimmedDataURL(
> 17 |     sigCanvas.current.getTrimmedCanvas().toDataURL('image/png')
     |                      ^
  18 |   );
  19 | }
  20 | 

Call Stack

HTMLUnknownElement.callCallback
  node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (19462:0)

Object.invokeGuardedCallbackImpl
  node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (19511:0)

These two pieces in particular are of interest:

TypeError: trim_canvas__WEBPACK_IMPORTED_MODULE_8__ is not a function

 node_modules/react-signature-canvas/dist/index.mjs (67:13)

These show it is indeed a problem with the trim-canvas import, and specifically only with the MJS ESM import of react-signature-canvas.

Notably, you can workaround this by using a CJS require instead (and v1.0.x is CJS/UMD as well):

const { SignatureCanvas } = require('react-signature-canvas')

Given that this is a NextJS ESM-CJS/UMD interop error with a dependency, it's a bug in NextJS that can't be fixed here. Even in trim-canvas, the only way to "fix" this would be to release a new version that supports native ESM in addition to UMD, which is a whole new feature to a package last published ~9 years ago 😕

[agilgur5]

I'm not sure what NextJS is doing under-the-hood, but it seems to have a bug loading UMD modules like trim-canvas that are dependencies of an ESM module like react-signature-canvas.

it's a bug in NextJS that can't be fixed here

These aren't entirely the same, but if you search in Next's issues for "is not a function" or "webpack_imported_module", you'll get many results. Specifically these seemed quite similar: vercel/next.js#65056, vercel/next.js#63795, vercel/next.js#57584 and possibly many more like vercel/next.js#62953, vercel/next.js#68413, vercel/next.js#52188 etc. __WEBPACK_IMPORTED_MODULE_*__ is not a function is a common error in these and the ESM-CJS interop is referenced in some too.
In general, there seem to be numerous compilation errors in NextJS afaict that seem to keep recurring or never received a root cause fix (note: I am not a Next user, just observing a pattern in the issues and basing it off this issue's root cause).

For reference, I get the same error with Next 13, 14, 15, and canary as well as with both the App Router and Pages Router. swcMinify and esmExternals options in next.config.js don't change the error and neither does tsconfig.json's esModuleInterop (which also suggests a bug in the interop).