Signature_pad: SignaturePad لا يعمل مع إنشاء تطبيق React

taylorlapeyre شكرا على التقرير. إنه أمر غريب حقًا ، لأنه يبدو أنه بدلاً من إرجاع رمز JS الفعلي ، فإنه يعيد مسارًا إلى ملف ، أي
هذا: __WEBPACK_IMPORTED_MODULE_1_signature_pad___default.a يساوي هذا: "/static/media/signature_pad.2ceae229.mjs" .

سأحاول معرفة الخطأ ، ولكن إذا كان لدى أي شخص أي فكرة ويمكنه إنشاء علاقات عامة مع إصلاح ، فسيكون ذلك رائعًا.

taylorlapeyre لقد اكتشفت ما هو الخطأ وأعتقد أنه في الواقع خطأ في react-create-app ، على الرغم من أنه يمكنني إصلاحه بسهولة هنا أيضًا. المشكلة هي أن Webpack 2 يقوم بتحميل إصدار ES6 ، الموجود في ملف signature_pad.mjs ، لكن أعتقد أن تكوين Webpack في react-create-app لا يعرف كيفية التعامل مع الملفات ذات الامتداد .mjs - لهذا السبب تقوم بإرجاع اسم ملف.

szimek آه ، هذا منطقي. أعتقد أنه من المحتمل أن يكون الإصلاح في Create React App في هذه الحالة. هل تريد عمل علاقات عامة هناك؟ يمكنني أيضًا أن أعتبره إذا أعطيتني نقطة انطلاق للخروج من 🙂

للتسجيل فقط - كان الحل البديل بالنسبة لنا هو نسخ ملف signature_pad.js إلى دليلنا src . بمجرد قيامنا بذلك ، تمكنا من استيراده كما هو متوقع.

شكرًا جزيلاً على الرد السريع على هذا ،szimek. أنا أعمل معtaylorlapeyre ... فقط تفرع من الريبو وغيرت عملية الإنشاء لكتابة ملف .js بدلاً من الملف .mjs . يمكنني أن أؤكد أن هذا يعمل تمامًا في سياق تطبيق إنشاء تفاعل! لكن نعم ، يبدو الأمر وكأنه مشكلة من نهايتها لأن mjs شيء.

مرة أخرى ، الدعائم الضخمة إلى szimek لنقلها بالفعل إلى CRA ... لا يبدو أنهم مهتمون جدًا بدعم mjs الرغم من ... woof.

يمكننا إنشاء تصحيح يقوم بتصدير الإصدار umd باسم مختلف ، على سبيل المثال signature_pad.umd.js ويستخدم signature_pad.js لبناء الوحدة. غير متأكد من مقدار التأثير الذي سيحدث على التوزيع الحالي الخاص بك. أيضًا ، لست متأكدًا من مدى شيوع حالة الاستخدام هذه في الوقت الحالي ... وفي كلتا الحالتين ، أخبرنا كيف يمكننا مساعدتك!

نعم ، ولكن قد يكون من المنطقي إعادة تسمية هذا الملف إلى signature_pad.es6.js للتأكد من أنه مدعوم في كل مكان. ومع ذلك ، مرة أخرى ، تتطلب إعادة تسمية ملفات dist إصدارًا رئيسيًا ، لذلك قد يحتاج هذا إلى الانتظار بعض الوقت. أحتاج إلى التحقق من مشكلة أخرى تتعلق بالتصدير الافتراضي مقابل التصدير المسمى والذي يتطلب أيضًا إصدارًا رئيسيًا (# 240). ربما سأفعل كلاهما في نفس الوقت.

الحل الأفضل هو استيراد ملف js مباشرة

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

شكرًا لك على الحل ، الاستيراد من signature_pad/dist/signature_pad.js يعمل بالنسبة لنا أجهزة الصراف الآلي.

هناك توصية رسمية من Facebook حول كيفية التعامل مع هذا.
يقترحون بشكل أساسي أنه لا يمكن اعتبار ES6 مدعومًا بالكامل لمدة عامين آخرين ، لذلك يجب على المكتبات نشر كود ES5. راجع هذا القسم في الملف التمهيدي:

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

اعتقدت أنني سأعلمك.

لم أجربه بعد ، ولكن create-react-app v2 يجب أن يجمع الكود في node_modules أيضًا - https://github.com/facebook/create-react-app/pull/3776. الإصدار 3 (حاليًا في مرحلة تجريبية) من signature_pad لم يعد يستخدم امتداد mjs ، لذلك يجب أن يعمل مع create-react-app v2 ، على الرغم من أنه سيكون من الرائع التأكيد.

يرجى إعادة فتح هذه المشكلة إذا استمرت المشكلة عند استخدام CRA 2 وأحدث إصدار تجريبي من هذه المكتبة.