همانطور که در جریان هستید فیسبوک در نسخه جدید React Native یعنی 0.59.2 یک سری قابلیت ها و ویژگی های جدید به همراه تغییرات را منتشر کرد.اما بعد از بروزرسانی react native به نسخه جدید یا ایجاد پروژه با آخرین نسخه به یک مشکل عمومی برخوردیم. این error مربوط به Metro server است.زمانی که ما پروژه React Native خودمان را اجرا میکنیم سپس یک دایرکتوری اشتباه اجرا می شود بنابراین root پروژه به launchPackager پاس داده نمی شود.

اسکرین شات از error:

Error: Unable to resolve module `./index` from `\node_modules\react-native\scripts/ Solution

admin March 29, 2019 React Native

Since we all know react native has recently launched its newly more compatible 0.59.2 version with some basic changes. But after upgrading to new version or creating new react native project we all have faced a common error. The error is coming from the Metro server instance. When we run our react native project then it will launched with wrong working directory and no project root is passed in launchPackager.

Screenshot of Error:

Error Message

Error: Unable to resolve module ./index from \node_modules\react-native\scripts/. : The module ./index could not be found from \node_modules\react-native\scripts/. Indeed, none of these files exist

1.به Your_React_Native_Project -> node_modules -> react-native -> scripts -> launchPackager.bat بروید و فایل launchPackager.bat را در Notepad یا ++Notepad باز کنید.

2.خط کد زیر را در فایل launchPackager.bat قرار دهید

 launchPackager.bat

1	launchPackager.bat

سورس کد فایل launchPackager.bat بعد از تغییرات:

:: Copyright (c) Facebook, Inc. and its affiliates.
::
:: This source code is licensed under the MIT license found in the
:: LICENSE file in the root directory of this source tree.
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-material-button-%d8%af%d8%b1-react-native/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/photo_2017-10-21_19-46-51-300x208.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">طراحی Material Button در react native</div></div></div><div class="ctaButton"></div></div></a></div> 
@echo off
title Metro Bundler
call .packager.bat
 
node "%~dp0..\cli.js" start 
 
node "%~dp0..\cli.js" start --projectRoot ../../../ 
 
pause
exit

:: Copyright (c) Facebook, Inc. and its affiliates.

:: This source code is licensed under the MIT license found in the

:: LICENSE file in the root directory of this source tree.

@echo off

title Metro Bundler

call .packager.bat

node "%~dp0..\cli.js" start

node "%~dp0..\cli.js" start --projectRoot ../../../

pause

exit

3.حالا ما باید مسیر root پروژه را به metro object بدهیم. بنابراین فایل runAndroid.js را در مسیرReact_Native_Project -> node_modules -> @react-native-community -> cli -> build -> commands -> runAndroid.js با Notepad باز می کنیم.

4.cwd: scriptsDir را در بلاک const procConfig باز می کنیم.

const procConfig = {
    cwd: scriptsDir
  };

const procConfig = {

cwd: scriptsDir

};

5.cwd: scriptsDir را با ()cwd: process.cwd جایگزین و ذخیره می کنیم.

const procConfig = {
   
    cwd: process.cwd()
 
  };

const procConfig = {

cwd: process.cwd()

};

6.حالا دایرکتوری پروژه را در command prompt یا Terminal باز کنید و دستور react–native run–android را اجرا کنید.به همین سادگی مشکل شما برطرف و پروژه شما اجرا خواهد شد.

راه حل مشکل Unable to resolve module `./index` from `\node_modules\react-native\scripts/

Error: Unable to resolve module `./index` from `\node_modules\react-native\scripts/ Solution

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

Error: Unable to resolve module ./index from `\node_modules\react-native\scripts/ Solution

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ

Error: Unable to resolve module `./index` from `\node_modules\react-native\scripts/ Solution