h.default is not a constructor

[nauman-matloob]

Hello i'v have this error "h.default is not a constructor" when i want to test the package.
import SignatureCanvas from 'react-signature-canvas';

in render :

[agilgur5]

Sorry, I can't reproduce this given the little information you've written here (seems like you're missing a code sample). The live CodeSandbox playground is able to run everything fine.

[nexeh]

I just got it to work by running npm install on my project without changing a single thing. i originally tried to just match the versions that were in the working example but that didn't have any effect so i just did an npm install and everything resolved it's self. So if anyone else stumbles upon this issue should try the same.

[agilgur5]

@nexeh yes, h.default on that line refers to SignaturePad's default export. Default exports don't exist in CJS, so .default is a shim transpilers use to emulate it.

I don't know why that's erroring for some people though, that's inserted by Babel. Potentially some misinstalled package based on your findings 🤷‍♂️

I should probably finish #42 sooner as that might help resolve things like this with a more up-to-date build process.

[TomDevs]

I was having a very similar issue (c.default is not a constructor) and after some debugging found out the cause of the error for our case.

When react-signature-canvas imports signature_pad, it seems to import the signature_pad.mjs file rather than the signature_pad.js version. Our webpack config had the following rule for using babel-loader:

{
  test: /\.(js|jsx|ts|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader"
  }
}

Specifying mjs in the test value allowed the code to be built correctly:

{
  test: /\.(js|jsx|ts|tsx|mjs)$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader"
  }
}

[agilgur5]

it seems to import the signature_pad.mjs file rather than the signature_pad.js version

This is a misleading comment, so allow me to correct this.

react-signature-canvas merely uses import SignaturePad from 'signature_pad' -- it does not choose any specific build of signature_pad on its own. This is also consistent in the dist CJS build, which has require('signature_pad'). This is merely a package import, which is by far the most common type of import -- so, to repeat, there is nothing specific or particularly different going on here.

What a package import such as that does is dependent on a variety of factors, including the package's package.json#main field, your version of Node, and any build tools you might be using, such as webpack, etc.

In this case, your environment is reading the mjs file (not react-signature-canvas, which itself does not choose). react-signature-canvas currently only has a CJS build though (#42 may introduce more builds), which is not compatible with ESM (.mjs) unless a helper or transpiler etc is introduced. As such, adding it to babel-loader will transpile it and fix this issue.

I'm not sure if this is the issue that OP and other duplicative issue OPs were experiencing (as they did not provide reproductions), but if so, that would make this very similar to (or duplicative of) the 4 year old issue #23 / szimek/signature_pad#257 .
Thanks for providing some details and a fix for webpack/babel-loader @TomDevs