Signature_pad: O SignaturePad não funciona com o Create React App

@taylorlapeyre Obrigado pelo relatório. É realmente estranho, porque parece que em vez de retornar o código JS real, ele retorna um caminho para um arquivo, ou seja,
este: __WEBPACK_IMPORTED_MODULE_1_signature_pad___default.a é igual a este: "/static/media/signature_pad.2ceae229.mjs" .

Vou tentar descobrir o que está errado, mas se alguém tiver alguma ideia e puder criar um PR com uma correção, seria incrível.

@taylorlapeyre Descobri o que há de errado e acho que é na verdade um bug em react-create-app , embora eu pudesse consertá-lo facilmente aqui também. O problema é que o Webpack 2 carrega a versão ES6, que está no arquivo signature_pad.mjs , mas acho que a configuração do Webpack em react-create-app não sabe como lidar com arquivos com extensão .mjs - é por isso que ele retorna um nome de arquivo.

@szimek ahh, isso faz sentido. Acho que a correção provavelmente deve estar em Create React App neste caso. Você quer fazer uma RP lá? Eu também agüento se você me der um ponto de partida para sair de 🙂

Apenas para registro - a solução alternativa para nós foi simplesmente copiar diretamente o arquivo signature_pad.js em nosso diretório src . Depois de fazer isso, pudemos importá-lo conforme o esperado.

Muito obrigado pela resposta rápida sobre isso, @szimek. Eu trabalho com @taylorlapeyre ... Acabei de fazer um fork do repo e alterei o processo de compilação para escrever um arquivo .js vez do arquivo .mjs . Posso confirmar que funciona totalmente em nosso contexto de criar-reagir-app! Mas sim, soa mais como um problema para eles, já que mjs é uma coisa.

mais uma vez, grandes adereços para @szimek por já ter levado isso para o CRA ... não parece que eles estão muito interessados ​​em apoiar mjs ... woof.

Poderíamos fazer um patch que exporta a construção umd com um nome diferente, por exemplo, signature_pad.umd.js e usa signature_pad.js para a construção do módulo. Não tenho certeza de quanto impacto isso terá em sua distribuição atual. Além disso, não tenho certeza de quão comum é esse caso de uso no momento ... De qualquer forma, deixe-nos saber como podemos ajudá-lo!

Sim, no entanto, pode fazer sentido simplesmente renomear este arquivo para signature_pad.es6.js para ter certeza de que ele é compatível em todos os lugares. No entanto, novamente, renomear os arquivos dist requer uma versão principal, portanto, pode ser necessário esperar um pouco. Preciso verificar outro problema relacionado à exportação padrão vs nomeada que também requer uma versão principal (# 240). Talvez eu faça os dois ao mesmo tempo.

Uma melhor solução é importar diretamente o arquivo js

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

Obrigado pela solução alternativa, importar de signature_pad/dist/signature_pad.js funciona para nós atm.

Há uma recomendação oficial do Facebook sobre como isso pode ser tratado.
Basicamente, eles sugerem que o ES6 não pode ser considerado totalmente suportado por mais alguns anos, portanto, as bibliotecas devem publicar o código ES5. Consulte esta seção no leia-me:

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

Pensei em deixar você saber.

Eu não tentei ainda, mas create-react-app v2 deve compilar o código em node_modules também - https://github.com/facebook/create-react-app/pull/3776. A v3 (atualmente em beta) de signature_pad não usa mais a extensão mjs , então deve funcionar com create-react-app v2, embora seja ótimo confirmar.

Reabra este problema se ainda for um problema ao usar o CRA 2 e a versão beta mais recente desta biblioteca.