Signature_pad: SignaturePad no funciona con la aplicación Create React

@taylorlapeyre Gracias por el informe. Es realmente extraño, porque parece que en lugar de devolver el código JS real, devuelve una ruta a un archivo, es decir
esto: __WEBPACK_IMPORTED_MODULE_1_signature_pad___default.a es igual a esto: "/static/media/signature_pad.2ceae229.mjs" .

Intentaré averiguar qué está mal, pero si alguien tiene alguna idea y puede crear un PR con una solución, sería increíble.

@taylorlapeyre Descubrí lo que está mal y creo que en realidad es un error en react-create-app , aunque también podría solucionarlo fácilmente aquí. El problema es que Webpack 2 carga la versión ES6, que está en el archivo signature_pad.mjs , pero supongo que la configuración del Webpack en react-create-app no sabe cómo manejar archivos con la extensión .mjs - por eso devuelve un nombre de archivo.

@szimek ahh, eso tiene sentido. Creo que la solución probablemente debería estar en Create React App en este caso. ¿Quieres hacer relaciones públicas allí? También puedo tomarlo si me das un punto de partida para partir 🙂

Solo para que conste: la solución para nosotros fue simplemente copiar directamente el archivo signature_pad.js en nuestro directorio src . Una vez que hicimos eso, pudimos importarlo como se esperaba.

Muchas gracias por la rápida respuesta a esto, @szimek. Trabajo con @taylorlapeyre ... Acabo de bifurcar el repositorio y cambiar el proceso de compilación para escribir un archivo .js lugar del archivo .mjs . ¡Puedo confirmar que funciona totalmente en nuestro contexto create-react-app! Pero sí, suena más como un problema por su parte, ya que mjs es una cosa.

una vez más, un gran apoyo para mjs ... guau.

Podríamos hacer un parche que exporte la compilación umd con un nombre diferente, por ejemplo, signature_pad.umd.js y use signature_pad.js para la compilación del módulo. Sin embargo, no estoy seguro de cuánto impacto tendrá eso en su distribución actual. Además, no estoy seguro de cuán común es este caso de uso en este momento ... De cualquier manera, ¡háganos saber cómo podemos ayudarlo!

Sí, sin embargo, podría tener sentido simplemente cambiar el nombre de este archivo a signature_pad.es6.js para asegurarse de que sea compatible en todas partes. Sin embargo, nuevamente, el cambio de nombre de los archivos dist requiere una versión importante, por lo que es posible que deba esperar un poco. Necesito ver otro problema relacionado con la exportación predeterminada vs con nombre que también requiere una versión importante (# 240). Tal vez haga los dos al mismo tiempo.

Una mejor solución es importar directamente el archivo js

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

Gracias por la solución alternativa, importar desde signature_pad/dist/signature_pad.js funciona para nosotros en el cajero automático.

Hay una recomendación oficial de Facebook sobre cómo se podría manejar esto.
Básicamente, sugieren que ES6 no puede considerarse totalmente compatible durante un par de años más, por lo que las bibliotecas deberían publicar el código ES5. Consulte esta sección en el archivo Léame:

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

Pensé que te lo haría saber.

Todavía no lo he probado, pero create-react-app v2 también debería compilar el código en node_modules : https://github.com/facebook/create-react-app/pull/3776. La v3 (actualmente en beta) de signature_pad ya no usa la extensión mjs , por lo que debería funcionar con create-react-app v2, aunque sería genial confirmarlo.

Vuelva a abrir este problema si sigue siendo un problema al utilizar CRA 2 y la última versión beta de esta biblioteca.