أخطاء شائعة في React Native

هذه بعض المشاكل الشائعة التي قد تواجهها أثناء إعداد React Native. إذا واجهتك مشكلة غير مدرجة هنا، فحاول البحث عن المشكلة في Github.

المنفذ قيد الاستخدام (Port already in use)

يشتغل مُحزِّم React Native على المنفذ 8081. إذا كانت هناك عملية أخرى تستخدم هذا المنفذ بالفعل، فيمكنك إمّا إنهاء هذه العملية أو تغيير المنفذ الذي يستخدمه المُجمّع.

إنهاء العملية على المنفذ 8081

نفّذ الأمر التالي للعثور على معرّف (id) العملية التي تُنصِت على المنفذ 8081:

 sudo lsof -i :8081

ثم نفّذ ما يلي لإنهاء العملية (مع استبدال ‎‎<PID>‎‎ بالمُعرّف):

 kill -9 <PID>

على Windows، يمكنك العثور على العملية باستخدام المنفذ 8081 باستخدام Resource Monitor وإيقافها باستخدام مدير المهام (Task Manager).

استخدام منفذ آخر غير المنفذ 8081

يمكنك ضبط المُحزِّم لاستخدام منفذٍ آخر غيرِ المنفذ 8081 باستخدام المعامل ‎‎port‎‎:

npx react-native start --port=8088

ستحتاج أيضًا إلى تحديث تطبيقاتك لتحميل حزمة JavaScript من المنفذ الجديد. إذا كنت تُشغّل التطبيق على الجهاز من Xcode، فيمكنك القيام بذلك عن طريق تحديث أماكن تواجد الرقم 8081 وتغييره إلى رقم المنفذ الذي اخترته في ملفّ ‎‎node_modules/react-native/React/React.xcodeproj/project.pbxproj‎‎.

خطأ قفل NPM

إذا واجهت خطأ مثل ‎‎npm WARN locking Error: EACCES‎‎ أثناء استخدام أداة React Native CLI (واجهة سطر أوامر React Native)، فحاول تنفيذ ما يلي:

sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules

مكتبات React مفقودة

إذا أضفت React Native يدويًا إلى مشروعك، فتأكد من تضمين جميع الاعتماديات (dependencies) ذات الصلة التي تستخدمها، مثل ‎‎RCTText.xcodeproj‎‎، و ‎‎RCTImage.xcodeproj‎‎. بعد ذلك، يجب ربط الثنائيات (binaries) التي تم إنشاؤها بواسطة هذه الاعتماديات بثنائيّة تطبيقك. استخدم قسمي ‎‎Linked Frameworks‎‎ و ‎‎Binaries‎‎ في إعدادات مشروع Xcode. للمزيد من التفاصيل، راجع صفحة ربط المكتبات.

إذا كنت تستخدم أداة CocoaPods، فتحقق من أنك أضفت React والمواصفات الفرعية (subspecs) إلى ملفّ Podfile. على سبيل المثال، إذا كنت تستخدم واجهات برمجة التطبيقات ‎‎<Text />‎‎، و‎‎<Image />‎‎، و‎‎fetch()‎‎، فستحتاج إلى إضافتها في ملف Podfile الخاص بك:

pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'RCTText',
  'RCTImage',
  'RCTNetwork',
  'RCTWebSocket',
]

بعد ذلك، تأكد من تنفيذ الأمر ‎‎pod install‎‎ وتأكّد كذلك من أنه قد تم إنشاء المجلد ‎‎Pods/‎‎ في مشروعك مع تثبيت React. سوف تُرشدك أداة CocoaPods إلى استخدام ملف ‎‎.xcworkspace‎‎ المُولَّد حديثًا من الآن فصاعداً للتمكّن من استخدام هذه الاعتماديّات المثبّتة.

لا يُجمَّع React Native عندما يُستخدَم كاعتمادية CocoaPod

React Native does not compile when being used as a CocoaPod

هناك إضافة CocoaPods تسمى cocoapods-fix-react-native تتعامل مع أي إصلاحٍ محتمل للشيفرة المصدر بسبب الاختلافات التي تحدث عند استخدام مدير اعتماديّات.

قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة

Argument list too long: recursive header expansion failed

في إعدادات بناء المشروع، يُحدّد كل من الإعدادين ‎‎User Search Header Paths‎‎ و ‎‎Header Search Paths‎‎ المكان الذي يجب أن يبحث فيه Xcode عن ملفات ترويسة ‎‎#import‎‎ المحددة في الشيفرة البرمجيّة. بالنسبة لملفّات Pod، تستخدم أداة CocoaPods مصفوفة افتراضيّة من مجلدات محددة للبحث فيها. تحقق من أن هذا الإعداد باقٍ على حاله وأنّه لم يتغيّر، وتحقّق من أنّ المجلدات التي ضُبِطَت غير كبيرة للغاية. إذا كان أحد المجلدات كبيرًا، فسيحاول Xcode البحث تعاوديًّا (recursively) في كامل المجلّد وسيرمي الخطأ الذي ورد في الأعلى في مرحلة ما.

للعودة إلى إعدادات ‎‎User Search Header Paths‎‎ و ‎‎Header Search Paths‎‎ الافتراضيّة التي حددتها CocoaPods، حدّد الإدخال في لوحة ‎‎Build Settings‎‎، واحذفه عبر الضغط على ‎‎delete‎‎. سيؤدي ذلك إلى إزالة التجاوز المخصص (custom override) والعودة إلى إعدادات CocoaPod الافتراضية.

خطأ No transports available

يستعمل إطار React Native شيفرة تعويض نقص دعم (polyfill) لإضافة دعم تقنيّة WebSockets. تُهيّأ شيفرة التعويض هذه كجزء من وحدة ‎‎react-native‎‎ التي تُضمِّنها في تطبيقك من خلال الاستيراد ‎‎import React from 'react'‎‎. إذا حمَّلت وحدة أخرى تتطلب WebSockets، مثل Firebase، فتأكّد من تحميلها أو استيرادها بعد react-native:

import React from 'react';
import Firebase from 'firebase';

استثناء ‎‎ShellCommandUnresponsiveException‎‎

إذا واجهك استثناء ‎‎ShellCommandUnresponsiveException‎‎ بشكل مشابه لما يلي:

Execution failed for task ':app:installDebug'.
  com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException

فجرّب تخفيض إصدار Gradle إلى 1.2.3 في ملفّ ‎‎android/build.gradle‎‎.

عدم استجابة الأمر ‎‎react-native init‎‎

إذا واجهت مشكلة توقّف الأمر ‎‎react-native init‎‎ عن الاستجابة، فجرّب تنفيذ الأمر مرّة أخرى في الوضع المُفصّل وانظر هذه الصفحة لبعض الأسباب الشائعة لهذه المشكلة:

npx react-native init --verbose

لا يُمكن تشغيل مدير حزم react-native (على Linux)

"‎‎Error "code":"ENOSPC","errno":"ENOSPC

هذه المشكلة ناتجة عن عدد المجلّدات التي يُمكن لأداة inotify (المستخدمة من طرف watchman على Linux) مُراقبتها. لحلها، نفّذ الأمر التالي في الطرفية:

echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

مصادر

• صفحة Troubleshooting في توثيق React Native الرسمي.