مشروع React-Native Expo يحمل نفس الوحدة مرتين كـ ts وjs

إذا كنت مطورًا للبرمجيات، فمن المحتمل أنك واجهت تحديات متعددة أثناء عملك على مشاريع تعتمد على JavaScript وReact Native. واحدة من هذه التحديات قد تكون ظهور مشكلة تحميل نفس الوحدة مرتين، مرة كملف TypeScript (ts) ومرة أخرى كملف JavaScript (js). سنتناول في هذا المقال تفاصيل هذه المشكلة، وتحديدًا في سياق مشروع يستخدم Expo.

حالة المشكلة

من المعروف أن وجود مكونات متعددة في مشروع واحد يمكن أن يؤدي أحيانًا إلى تحميل نفس الوحدة بأكثر من شكل. في هذه الحالة، تظهر المشكلة مع وحدة npm تدعى Body، والتي تقوم بتصدير مثيل واحد للكائن. المشكلة تكمن في أن هناك وحدات أخرى، مثل Brain، تعتمد على استيراد Body بطريقة معينة، مما يؤدي في بعض الأحيان إلى تحميلها مرتين، واحدة بصيغة ts والأخرى بصيغة js.

السلوك الغير متوقع

عندما تبدأ مشروع React Native باستخدام Expo، قد تجد أنه عند استيراد وحدة Body في مكون معين، تجد أن هناك مثيلًا آخر يتم إنشاؤه دون سبب واضح. على الرغم من أن المفاهيم الأساسية لكل من TypeScript وJavaScript تشير إلى استحالة تقييم الوحدة أكثر من مرة، إلا أننا نجد أن الوضع هنا يختلف. يحدث هذا غالبًا لأن البيئة التي تعمل بها، مثل Expo، قد تتعامل مع الملفات بطريقة مختلفة، مما يؤدي إلى تحميل نسخ متعددة من نفس الوحدة.

تحليل الجذور

يعتبر الفهم الجيد لآلية استيراد وتصدير الوحدات في JavaScript وTypeScript أمرًا ضروريًا لحل هذه المشكلة. عند استيراد ملفات من مكتبات npm، يمكن أن تتداخل النسخ المختلفة إذا لم يتم التحقق من المسارات بدقة. مما يزيد الأمور تعقيدًا، أن وجود ملفات .ts و.js و.d.ts في نفس الوحدة يعنى أن المحول قد يختار أحدها بشكل عشوائي، مما يؤدي إلى نتائج غير متوقعة.

كيفية الحل

إحدى الحلول المقترحة التي يمكن تجربتها هي إضافة إعداد “preferTsExts” إلى ملف tsconfig.json. هذا الخيار يسمح للبيئة بتفضيل ملفات TypeScript عند وجود نسخ مكررة من نفس الوحدة. ولكن في حالة استمرار المشكلة، يجب النظر في كيفية استيراد الوحدات والتأكد من عدم وجود تداخل في المسارات.

في مثال التجربة المذكور، عند إضافة سطر console.log في كل من ملفات Body لتحديد أي نسخة يتم تحميلها، لوحظ أنه يتم إنشاء مثيلين من الكائن: واحد من ملف TypeScript وآخر من ملف JavaScript.

التجربة العملية

لتسهيل عملية الفهم، يمكنك البدء بإنشاء مشروع Expo جديد. بعد تثبيت الوحدات المطلوبة، قم بإجراء الاستيراد كما هو موضح وقم بتشغيل التطبيق. عندما ترى مخرجات console، ستلاحظ أن كلا النسختين تم تحميلهم، مما يدل على مشكلة في عملية التقييم.

استنتاجات

إن فهم كيفية تحميل الوحدات المختلفة في مشروع React Native باستخدام Expo يعتمد بشكل كبير على الممارسات الصحيحة في التعامل مع JavaScript وTypeScript. يجب أن تكون حذرًا عند عملك مع وحدات تحتوي على نسخ مختلفة، وأن تبحث عن الحالات التي قد تؤدي إلى تحميل مكررات.

بالنهاية، تعد مشكلة تحميل نفس الوحدة مرتين في سياق مشروع React Native باستخدام Expo مثالًا نموذجيًا على التحديات التي قد يواجهها المطورون. من خلال فهم العوامل المؤثرة في عملية الاستيراد والتصدير، يمكن تجاوز هذه المشكلات وتحسين أداء التطبيقات بشكل عام. قد تكون الحلول ليست دائمًا بسيطة، إلا أن الاستكشاف والتجربة ستقود إلى نتائج أفضل وتحسين التجربة البرمجية.