Signature_pad: SignaturePad ne fonctionne pas avec l'application Create React

@taylorlapeyre Merci pour le rapport. C'est vraiment étrange, car il ressemble au lieu de renvoyer le code JS réel, il renvoie un chemin vers un fichier, c'est-à-dire
ceci: __WEBPACK_IMPORTED_MODULE_1_signature_pad___default.a équivaut à ceci: "/static/media/signature_pad.2ceae229.mjs" .

Je vais essayer de découvrir ce qui ne va pas, mais si quelqu'un a une idée et pourrait créer un PR avec un correctif, ce serait génial.

@taylorlapeyre J'ai compris ce qui ne va pas et je pense que c'est en fait un bogue dans react-create-app , bien que je puisse facilement le corriger ici aussi. Le problème est que Webpack 2 charge la version ES6, qui se trouve dans le fichier signature_pad.mjs , mais je suppose que la configuration de Webpack dans react-create-app ne sait pas comment gérer les fichiers avec l'extension .mjs - c'est pourquoi il renvoie un nom de fichier.

@szimek ahh, c'est logique. Je pense que le correctif devrait probablement être dans Create React App dans ce cas. Voulez-vous faire un PR là-bas? Je peux aussi le prendre si vous me donnez un point de départ pour partir 🙂

Pour mémoire, la solution de contournement pour nous était simplement de copier directement le fichier signature_pad.js dans notre répertoire src . Une fois que nous avons fait cela, nous avons pu l'importer comme prévu.

Merci beaucoup pour la réponse rapide à ce sujet, @szimek. Je travaille avec @taylorlapeyre ... Je viens de bifurquer le dépôt et de modifier le processus de construction pour écrire un fichier .js au lieu du fichier .mjs . Je peux confirmer que cela fonctionne totalement dans notre contexte create-react-app! Mais oui, cela ressemble plus à un problème de leur côté puisque mjs est une chose.

encore une fois, d'énormes accessoires à @szimek pour avoir déjà mjs cependant ... woof.

Nous pourrions créer un patch qui exporte la construction umd sous un nom différent, par exemple signature_pad.umd.js et utilise signature_pad.js pour la construction du module. Vous ne savez pas quel impact cela aura sur votre distribution actuelle. De plus, je ne sais pas à quel point ce cas d'utilisation est courant pour le moment ... Quoi qu'il en soit, dites-nous comment nous pouvons vous aider!

Ouais, mais il peut être judicieux de simplement renommer ce fichier en signature_pad.es6.js pour s'assurer qu'il est pris en charge partout. Cependant, encore une fois, renommer les fichiers dist nécessite une version majeure, donc cela peut nécessiter un certain temps. Je dois vérifier un autre problème lié à l'exportation par défaut vs nommée qui nécessite également une version majeure (# 240). Peut-être que je vais les faire les deux en même temps.

Une meilleure solution de contournement consiste à importer directement le fichier js

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

Merci pour la solution de contournement, l'importation de signature_pad/dist/signature_pad.js fonctionne pour nous atm.

Il y a une recommandation officielle de Facebook sur la façon dont cela pourrait être géré.
Fondamentalement, ils suggèrent que ES6 ne peut pas être considéré comme entièrement pris en charge pendant quelques années, par conséquent, les bibliothèques devraient publier le code ES5. Voir cette section dans le readme:

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

J'ai pensé que je te ferais savoir.

Je ne l'ai pas encore essayé, mais create-react-app v2 devrait également compiler le code dans node_modules - https://github.com/facebook/create-react-app/pull/3776. La v3 (actuellement en version bêta) de signature_pad n'utilise plus l'extension mjs , elle devrait donc fonctionner avec create-react-app v2, mais ce serait bien de confirmer.

Veuillez rouvrir ce problème si le problème persiste lors de l'utilisation de CRA 2 et de la dernière version bêta de cette bibliothèque.