`h.default is not a constructor`

[nauman-matloob]

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

in render : <SignatureCanvas />

[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]

@agilgur5 i agree that there hasn't been enough information for a bug report but i happened to bump into this today so i was attempting to find the cause of it and report back. unfortunately i haven't had that "AH HA!" moment yet.

First off some background. A few weeks ago i installed this project and started to explore it. Work got busy and i got distracted and when i came back to exploring, this was the error message i found.

Next, i decided i would take your live example and run it and it doesnt work inside of my application. I copied it over, created a component out of it which i added a route to so i could just navigate directly to it without worrying about other thing on the page/state.

import Signature from './components/Signature/Signature'

<Route path="/signature" component={Signature} />

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import SignaturePad from 'react-signature-canvas'

import styles from './styles.module.css'

export default class Signature extends Component {
  state = {trimmedDataURL: null}
  sigPad = {}
  clear = () => {
    this.sigPad.clear()
  }
  trim = () => {
    this.setState({trimmedDataURL: this.sigPad.getTrimmedCanvas()
      .toDataURL('image/png')})
      console.log(this.state.trimmedDataURL)
  }
  render () {
    let {trimmedDataURL} = this.state
    return <div className={styles.container}>
      <div className={styles.sigContainer}>
        <SignaturePad canvasProps={{className: styles.sigPad}}
          ref={(ref) => { this.sigPad = ref }} />
      </div>
      <div>
        <button className={styles.buttons} onClick={this.clear}>
          Clear
        </button>
        <button className={styles.buttons} onClick={this.trim}>
          Trim
        </button>
      </div>
      {trimmedDataURL
        ? <img className={styles.sigImage}
          src={trimmedDataURL} />
        : null}
    </div>
  }
}

The next thing i did was to reinstall and that didnt seem to make any difference:

$ npm install --save react-signature-canvas

+ react-signature-canvas@1.0.3
updated 1 package and audited 1629 packages in 76.365s

I also tried various version that dont seem to matter. Obviously the live example work so this seems to be something i am doing wrong or is environmental. I confirmed this be creating a new create-react-app, installing react-signature-canvas, and it loads just fine.

tried to decipher the minified code, but didnt lead to much insight. Does this area where the code failing look familiar so i can find the source code to continue debuging?

// this is the line that causes the problem. 
this._sigPad = new h.default(this._canvas,this._excludeOurProps()),

// h is defined by this function
h = r(v)

// i THINK r is defined like this
r = i(this, (e = t.__proto__ || Object.getPrototypeOf(t)).call.apply(e, [this].concat(c)))

Found this in index.js:ComponentDidMount and im not sure if it correlates?

this._sigPad = new SignaturePad(this._canvas, this._excludeOurProps())

If it does this would mean that h.default would be SignaturePad

[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

[agilgur5]

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

v1.1.0-alpha.1 has been released as the first official native TS release with the new Rollup-based build tooling