SignaturePad not working with Create React App

[taylorlapeyre]

Found a bug when attempting to use signature_pad with Webpack 2!

My project is using the newest version of Create React App. Using SignaturePad with previous versions of Create React App worked as expected, but a bug appeared when they upgraded to Webpack 2. Therefore, I am pretty confident that it specifically has to do with Webpack 2's new import/export mechanisms.

What is the current behavior?

When attempting to create a new instance of SignaturePad, the app crashes with a specific webpack-related error:

What is the expected behavior?

The instance should be created as expected, without the crash.

Which versions of SignaturePad, and which browser / device are affected by this issue? Did this work in previous versions of SignaturePad?

This appears to happen in both Chrome and Safari.

[szimek]

@taylorlapeyre Thanks for the report. It's really strange, because it looks like instead of returning the actual JS code, it returns a path to a file, i.e.
this: __WEBPACK_IMPORTED_MODULE_1_signature_pad___default.a equals this: "/static/media/signature_pad.2ceae229.mjs".

I'll try to find out what's wrong, but if anyone has any idea and could create a PR with a fix, it would be awesome.

[szimek]

@taylorlapeyre I figured out what's wrong and I think it's actually a bug in react-create-app, though I could easily fix it in here as well. The issue is that Webpack 2 loads the ES6 version, which is in signature_pad.mjs file, but I guess Webpack configuration in react-create-app doesn't know how to handle files with .mjs extension - that's why it returns a filename.

[taylorlapeyre]

@szimek ahh, that makes sense. I think that the fix should probably be in Create React App in this case. Do you want to make a PR over there? I can also take it if you give me a starting point to go off of 🙂

[taylorlapeyre]

Just for the record - the workaround for us was simply directly copying the signature_pad.js file into our src directory. Once we did that, we were able to import it as expected.

[jeffmicklos]

Thanks so much for the quick reply on this, @szimek. I work with @taylorlapeyre... Just forked the repo and changed the build process to write out a .js file instead of the .mjs file. I can confirm that totally works in our create-react-app context! But yes, sounds like more of an issue on their end since mjs is a thing.

[jeffmicklos]

once again, huge props to @szimek for already taking this to CRA... doesn't look like they are very interested in supporting mjs though... woof.

We could make a patch that exports the umd build under a different name, e.g. signature_pad.umd.js and uses signature_pad.js for the module build. Not sure how much of an impact that will have on your current distribution, though. Also, not sure how common this use case is at the moment... Either way, let us know how we can help you!

[szimek]

Yeah, however it might make sense to simply rename this file to signature_pad.es6.js to make sure it's supported everywhere. However, again, renaming dist files requires a major release, so this might need to wait a while. I need to check out another issue related to default vs named export that also requires a major release (#240). Maybe I'll just do them both at the same time.

[mlecoq]

A better workaround is to import directly the js file

import SignaturePad from 'signature_pad/dist/signature_pad.js';

[kreba]

Thank you for the workaround, importing from signature_pad/dist/signature_pad.js works for us atm.

There is an official recommendation from Facebook as to how this could be handled.
Basically they suggest that ES6 cannot be considered fully supported for another couple years, therefore libraries should publish ES5 code. See this section in the readme:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

Thought I'd let you know.

[szimek]

I haven't tried it yet, but create-react-app v2 should compile code in node_modules as well - facebook/create-react-app#3776. The v3 (currently in beta) of signature_pad no longer uses mjs extension, so it should work with create-react-app v2, though it would be great to confirm.