Doesn't seem to support Webpack

[szh]

I'm using Webpack to bundle my app and I'm trying to integrate SignaturePad. I tried using
import { SignaturePad } from "signature_pad", import "signature_pad", require("signature_pad") and many other variations, with "signature_pad/signature_pad", and even "signature_pad/src/signature_pad", but it seems that Webpack doesn't support the module types that SignaturePad uses.

The only way I got it to work is using exports-loader:
var SignaturePad = require("exports?SignaturePad!signature_pad/src/signature_pad");

Any plans to add Webpack support? Or am I missing something?

[bbashy]

In the same boat too! Webpack :(

[JD-Robbs]

Personally, I have set it up in the webpack.config.js as follows (using the expose loader):

module: { 
    loaders: [
        {test: require.resolve('signature_pad'), loader: 'expose?SignaturePad'},
        [...]
    ]
}

And then in my code simply:

let SignaturePad = require("signature_pad");

So, this is essentially what you are already doing, just that you can instead set it up once and then import the usual way.

[szimek]

In theory it should work - the production build uses Universal Module Definition (UMD) and has the main field in package.json file.

Anyone wants to investigate why it doesn't actually work and create a PR that fixes this issue?

[szimek]

Can you check if beta version (1.6.0-beta.1, can be installed using npm i signature_pad@beta) works?

[szh]

Yes, now I can use var SignaturePad = require("signature_pad"); or import "signature_pad", though I still can't do `import { SignaturePad } from "signature_pad".

[szimek]

@szh Thanks for the info! It sucks that ES6 import doesn't work. I don't think that UMD is supposed to support ES6 export/import :/

I'll see if I have to provide 2 different builds - ES6 (that uses export default and is exposed using jsnext:main in package.json file) and UMD or if there's a simpler way.

If anyone knows anything about it already, it would be awesome!

[szh]

I just tried import * as SignaturePad from "signature_pad"; and it works. It might not be worth the effort to create separate builds, maybe just add this to the readme instead.

[szimek]

@szh I still want to try it out and fix it (or at least document it) before releasing 1.6.0 (or 2.0.0, because I'm also considering removing Bower support). I've noticed that I'm exporting SignaturePad class using module.exports = SignaturePad; instead of export default SignaturePad, but I have no idea if it changes anything after it's compiled by Babel.

[collinforrester]

So both import * as SignaturePad from "signature_pad"; and require('signature_pad') worked for me.

However, I had to add "plugins": ["transform-exponentiation-operator"] to my .babelrc file. It seemed that babel was picking that plugin definition up from the .babelrc file in node_modules/signature_pad.

Once I installed and added that I was good to go.

[szimek]

Uh, I forgot about transform-exponentiation-operator. I'll remove it, because it doesn't really do much and everyone would need to add it.

[collinforrester]

Any luck figure out what type of builds you have to support to allow import {} syntax as well as require?

We're struggling with that internally as well.

[szimek]

Nope, not yet :/

[szimek]

I've just published a new beta version (1.6.0-beta.6) that hopefully fixes loading it with webpack. I tried it locally with webpack 2.x and both import SignaturePad from 'signature_pad' and const SignaturePad = require('signature_pad') worked fine.

I rewrote the build script completely to use gulp and rollup and it generates 3 builds now - umd for webpack 1.x, <script> tags etc., minified version of umd and es6 build for webpack 2.x, rollup etc.

Let me know if it works.

[szimek]

@collinforrester ☝️

[szh]

It works! Visual Studio 2015 doesn't seem to like it, but it does work fine.

[szimek]

@szh What does exactly Visual Studio 2015 doesn't like about it? Maybe we can do something about it.

[szh]

[szimek]

@szh Are you sure you have it in package.json dependencies or devDependencies?

BTW. Do you have to use import { SignaturePad } from 'signature_pad'? import SignaturePad from 'signature_pad' doesn't work? Please make sure you're using the latest beta version (1.6.0-beta.6).

[szh]

I double checked, I do have it in package.json in dependencies: "signature_pad": "1.6.0-beta.6",. You're right, I don't need to use curly braces, I just did out of habit. I should note that VS had the same problem on 1.6.0-beta.1 as well - I don't remember if it did before that.

Also, before I only tested that it would transpile (I'm using TypeScript) w/o errors or warnings. I just tested a page which uses the component and I see that, whereas when using import * as SignaturePad from "signature_pad";, calling new SignaturePad(canvas, opts) would call the constructor correctly, now webpack converts it to var signature_pad_1 = __webpack_require__(335); ... new signature_pad_1.default(canvas, opts), or when importing with braces, signature_pad_1.SignaturePad, both of which fail.

[szimek]

@szh And what happens if instead of import * as SignaturePad from "signature_pad" you simply do import SignaturePad from "signature_pad"?

[szh]

Sorry I wasn't so clear. That's what I'm doing now, and it compiles to var signature_pad_1 = __webpack_require__(335); at the top of the file, and then new signature_pad_1.default(canvas, opts). When I do import { SignaturePad } from 'signature_pad' with braces, then it's new signature_pad_1.SignaturePad(canvas, opts)

[szimek]

@szh I'm lost. Does it work with import SignaturePad from 'signature_pad'? I don't plan to support every possible version of import syntax 😉

[szh]

import SignaturePad from 'signature_pad'; new SignaturePad(canvas, opts) generates var signature_pad_1 = __webpack_require__(335); new signature_pad_1.default(canvas, opts)

import { SignaturePad } from 'signature_pad'; new SignaturePad(canvas, opts) generates var signature_pad_1 = __webpack_require__(335); new signature_pad_1.SignaturePad(canvas, opts)

Both of those fail. The only thing that works is import * as SignaturePad from "signature_pad";

[szimek]

This will never end 😉 @szh Which version of webpack are you using? I thought I tried it with the latest webpack 1.x (though I was using my local version of this library via npm link) and it worked...

[szh]

I'm using Webpack 1.14.0

[szimek]

@szh It works fine for me 😕

I created a repo with the app I'm using to test it: https://github.com/szimek/signature_pad-webpack-1-test. It's basically the demo app, just with webpack 1.14.0. Run:

yarn && yarn run build && open index.html

to try it out.

[szh]

I was able to reproduce the issue in your demo repo by using TypeScript...

[szimek]

@szh Could you make a PR to this repo I created that adds typescript and causes this error to show up?

[szh]

https://github.com/szimek/signature_pad-webpack-1-test/pull/1

[szimek]

@szh This is probably the issue you're having: microsoft/TypeScript#13017 and rollup/rollup#1156.

[szh]

Aha. Good job tracking that down

[szimek]

Looks like it might get solved soon :/ The fastest fix would probably be to switch to webpack 2.x and use the es6 version of the library ;)

[szh]

I think until it's fixed I'll continue using import * as SignaturePad from "signature_pad";
;)

[szimek]

I'll probably release 1.6.0-beta.6 as 1.6.0 then and just add info in the README file about this issue with TS. Thanks!

[szh]

Sounds good to me! Thanks for the help!

[dlombardi]

I'm unable to import signature_pad with the syntax import SignaturePad from 'signature_pad'
error is ReferenceError: SignaturePad is not defined

[szimek]

@dlombardi Could you create a new issue? Which version are you using?

[sugiserv]

I had this issue and what worked for me was directly importing the JS file as per this comment. I'm on webpack 2.2.1.

[divdax]

Same here... cannot import / require with webpack!

[szimek]

@divdax Are you using JS or TS? Which version of webpack?

I've just created a very simple "app" that is bundled with webpack (3.11.0) and it works:

webpack.config.js

module.exports = {
  entry: './index.js',
  output: { filename: 'bundle.js' }
};

index.js

import SignaturePad from 'signature_pad';

const signaturePad = new SignaturePad(document.querySelector('canvas'));

index.html

<html>
  <body>  
    <canvas style="border: 2px solid #000"></canvas>
    <script src="bundle.js"></script>
  </body>
</html>

If you run yarn add webpack signature_pad && yarn run webpack, it should generate bundle.js file and you can then open index.html file in any browser and it should work.

If anyone still has some problems with webpack, please open a new issue.

[calvinfroedge]

Could not get any variation of import SignaturePad from 'signature_pad to work. import SignaturePad from "signature_pad/dist/signature_pad.min.js"; works.

Webpack 3.5 w/ SignaturePad 2.3.2.

[szimek]

@calvinfroedge Could you try version 3.0.0-beta.1 and see if you have the same problem?

[ibrokemypie]

I am in the same boat, is 3.0.0-beta.1 yarn add-able?

[bcasci]

I don't mean to re-open this issue, but I too ran into this while migrating an application that uses signature_pad to webpack.

The issue turned out to be a problem in the application code, not webpack or some interaction between webpack and signature_pad. Specifically a missing variable assignment keyword (var, let, const), which produced an error similar to the one @dlombardi had.

// Produces a SignaturePad undefined error without using var, let or const
signaturePad = new SignaturePad(document.querySelector('canvas'))

// works
let signaturePad = new SignaturePad(document.querySelector('canvas'))

So if you're new to ES6 and Webpack, don't forget about little things like this and maybe consider using a javascript linter to help spot similar issues.