Helping A Friend Out With An Error While Cloning And Running A React App Locally by rufans

hive-169321 · @rufans · Oct 19 '21 (edited)

$13.02

Helping A Friend Out With An Error While Cloning And Running A React App Locally

The image below is the final interface after every issue was solved.
![Screenshot (13).png](https://images.hive.blog/DQmf4ygd6TpUFXgicmaKjpnXLFQAJjb4pSG2Xg1VhEehfNC/Screenshot%20(13).png)

It was a late night at my end when I got the below message from a friend via discord
> Did you figure out about cloning from Github? I am also having a problem now.
Did you follow any tutorials?
I already did npm install react-scripts --save and whatever the online suggested but I still can't use npm start
it's showing me 'react-scripts' is not recognized as an internal or external command, do you know how to solve it?

My reply was to clone the repo at my end in the morning. Since I have worked with cloning a Github repo before now, I never thought I would encounter any issue.
Morning came and I faced it! Errors upon Errors. But I was able to figure it out at my end. Below are the steps taken

### Setting Up An Environment Before Cloning
* I created a folder with ```mkdir youtube-clone```
* I cloned the repo she provided with ```git clone https://github.com/safak/youtube.git```

After successfully cloning it, I noticed the project files are the same as what she showed me last night.
![Screenshot (12).png](https://images.hive.blog/DQmZxjz5XN41bVDiz9trmPFHr416vNpxyoHt8C8FtVLFgZX/Screenshot%20(12).png)

At this point, I knew those files aren't valid React app files. And since the files look exactly like a JavaScript project, I decided to open it with a Live Server. It compiled and ran as expected.

![Screenshot (11).png](https://images.hive.blog/DQmQeqhK2j7aLbywAcFo7yV95TBCt6BbL63D2CrnnduR3bp/Screenshot%20(11).png)

But I knew she was working on a React project and not JavaScript. So, I decided to examine the repo properly on GitHub. Then, I noticed that the repo has 28 branches. These branches represent a different YouTube tutorial by the repo owner.

Before she messaged me, she had told me she was working on a portfolio project via a React Portfolio tutorial on youtube. So, I decided to search for it among the 28 branches. And Yes.! I found two results. **React-portfolio** and **React-portfolio-website**.

I went back to my gitbash to navigate to one of those branches.
While I was still on the clone directory, I navigated to **React-portfolio-website** with this command ```git checkout react-portfolio-website``` then, Vscode displayed the react files as you can see from the image below.

![Screenshot (14).png](https://images.hive.blog/DQmZqgnAfjAcZG58siHvsv7W2HVsHKe8gxiDkND375Kb7yp/Screenshot%20(14).png)

Starting the project with **npm start** returned this error ```'react-scripts' is not recognized as an internal or external command,
operable program or batch file.``` This was the exact error she talked of last night.

However, instead of trying to install **react-scripts**, I decided to run **npm install** and this took about 2mins to complete.

Now, starting the project with **npm start** open the project on my *localhost:3000* with this error

```./src/components/intro/Intro.jsx Module not found: Can't resolve '../../img/me.png' in 'C:\Users\HP\desktop\youtube\src\components\intro```

From the error above, I could tell the compiler failed to find **me.png**. Instead of searching around for the me.png file on the repo, I duplicated the **start.png** file. One of the available images I found on the **Img path**. I renamed the duplicate from **star.png** to **me.png**.

Saving the project with **Ctrl S** refreshed my localhost:3000 into a webpack error page. I got shocked if this was going to be another problem? 😂. Instead of panicking or Googling a webpack error page, I manually refreshed the page on my browser with **Ctrl R** and ***Vwa-Lah, Wa-Lah, Wa-La!!!*** It worked.

![Screenshot (13).png](https://images.hive.blog/DQmf4ygd6TpUFXgicmaKjpnXLFQAJjb4pSG2Xg1VhEehfNC/Screenshot%20(13).png)

👍 arcange, laruche, josediccus, brotherhood, walterjay, sbi7, ctime, investegg, communitybank, hive-143869, eternalsuccess, firstamendment, justtryme90, pboulet, drifter1, fantasycrypto, iptrucs, mammasitta, jigstrike, trisolaran, rafaelaquino, marivic10, francosteemvotes, solox, jackramsey, steemegg, battebilly, tezzmax, rencongland, guider, aidefr, peterpanpan, rohansuares, dashfit, robotics101, benie111, duke77, tomatom, ghazanfar.ali, hardaeborla, tipy, xanderslee, randomblock1, kdee916, yestermorrow, joshglen, sixexgames, mengene, shamzy, pearlumie, netzisde, tomlee, leslierevales, sportsconnect, mayorfaruk, chris4210, eprolific, ilovegames, swirly, nascimentoab, topworlds, colmedwardsphoto, makrotheblack, laviniatherapist, and 113 others

`author`	rufans
`permlink`	helping-a-friend-out-with-an-error-while-cloning-and-running-a-react-app-locally
`category`	hive-169321
`json_metadata`	{"tags":["react","javascript","code","development","neoxian"],"image":["https://images.hive.blog/DQmf4ygd6TpUFXgicmaKjpnXLFQAJjb4pSG2Xg1VhEehfNC/Screenshot%20(13).png","https://images.hive.blog/DQmZxjz5XN41bVDiz9trmPFHr416vNpxyoHt8C8FtVLFgZX/Screenshot%20(12).png","https://images.hive.blog/DQmQeqhK2j7aLbywAcFo7yV95TBCt6BbL63D2CrnnduR3bp/Screenshot%20(11).png","https://images.hive.blog/DQmZqgnAfjAcZG58siHvsv7W2HVsHKe8gxiDkND375Kb7yp/Screenshot%20(14).png"],"app":"hiveblog/0.1","format":"markdown"}
`created`	2021-10-18 13:49:00
`last_update`	2021-10-19 23:52:06
`depth`	0
`children`	0
`last_payout`	2021-10-25 13:49:00
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	6.545 HBD
`curator_payout_value`	6.474 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	3,881
`author_reputation`	101,081,674,466,198
`root_title`	"Helping A Friend Out With An Error While Cloning And Running A React App Locally"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	107,124,687
`net_rshares`	12,092,225,213,809
`author_curate_reward`	""

properties (23)vote details (177)

voter	rshares	pct
drifter1	36,538,421,738	100%
chris4210	3,381,584,033	32.5%
justtryme90	45,386,950,432	32.5%
mammasitta	31,808,475,928	6.5%
nascimentoab	2,881,768,819	32.5%
arcange	8,075,347,557,132	100%
joshglen	3,784,752,153	32.5%
randomblock1	4,054,500,326	65%
sc-steemit	2,416,560,312	32.5%
dashfit	6,270,106,781	32.5%
hoboway	806,868,528	32.5%
daj	635,739,250	32.5%
walterjay	304,438,954,103	17.5%
sixexgames	3,717,234,648	32.5%
more4less	2,590,769,907	65%
lugaxker	1,261,883,220	25.98%
mrstaf	1,257,398,242	32.5%
christianolu	963,863,577	90%
kisom1	694,709,992	32.5%
friesennerz	1,666,227,350	32.5%
firstamendment	58,179,085,979	50%
gingerninja	1,868,237,393	10%
tipy	4,644,538,638	100%
makrotheblack	2,744,359,010	32.5%
blackmagic	1,949,616,621	65%
bambukah	1,315,195,107	35%
zonguin	2,193,980,951	17.5%
fatherfaith	2,460,297,515	32.5%
khalil319	1,779,676,510	50%
colmedwardsphoto	2,856,295,296	65%
francosteemvotes	12,178,281,830	35%
pearlumie	3,597,137,705	32.5%
onyi	628,241,697	52%
rafaelaquino	17,161,510,902	100%
evildido	2,043,034,068	17.5%
yajirang	490,666,868	32.5%
aidefr	7,016,841,002	26.25%
tezzmax	8,334,067,795	32.5%
tochprince	1,501,114,146	32.5%
gnarlyanimations	1,155,349,456	65%
tolarnee	772,174,688	32.5%
ghazanfar.ali	5,579,389,659	32.5%
rubia.michelle	951,152,730	100%
bcrafts	1,400,201,406	13%
investegg	94,433,041,419	2.2%
josediccus	399,341,682,176	40%
battebilly	8,367,307,310	32.5%
airhawk-project	1,301,023,866	65%
odebgaming	784,765,742	65%
kdee916	3,925,918,702	32.5%
dbddv01	977,860,219	17.5%
kerry234	508,765,874	65%
marvel1206	2,232,676,262	32.5%
mirfaner	508,370,032	65%
tboyloyal	872,444,110	32.5%
hrhmikelength	889,639,043	32.5%
berkaytekinsen	1,134,442,533	65%
jutdagut	601,838,544	65%
motivatorjoshua	1,154,826,434	65%
mhm-philippines	657,954,450	32.5%
xanderslee	4,290,242,065	65%
enjoyy	665,007,590	32.5%
robotics101	5,922,463,315	35%
lpv	2,118,350,752	6.56%
iptrucs	32,031,375,507	25%
funshel	649,125,648	32.5%
sneakyninja	1,273,573,659	2.15%
statorcrime	1,172,446,605	17.5%
tomatom	5,775,661,110	32.5%
duke77	5,853,041,856	25%
akumar	1,323,313,566	65%
brotherhood	347,495,919,315	32.5%
azmielbanjary	2,085,381,337	32.5%
benie111	5,857,115,009	26%
sholly1	1,139,147,483	26%
eprolific	3,321,124,106	65%
communitybank	88,483,287,897	65%
osarueseosato	1,267,218,399	65%
jigstrike	22,028,669,955	32.5%
leslierevales	3,522,044,154	32.5%
airhawk-exchange	1,131,835,721	65%
mrxplicit	789,765,030	65%
steemboat-steve	516,055,992	16.25%
cheesom	582,770,778	32.5%
cool08	1,737,524,228	32.5%
fantasycrypto	34,259,183,407	32.5%
mastergerund	1,190,037,042	4.31%
photohunter2	576,627,256	32.5%
preciousimo	900,319,498	65%
sportsconnect	3,516,538,802	65%
michelmake	662,603,824	32.5%
atjehsteemit	601,519,940	32.5%
evepontes	748,187,867	100%
sunshinebear	890,564,885	32.5%
nucleus-tezz	1,932,893,406	32.5%
botefarm	1,390,676,256	50%
comidinhas	693,519,677	100%
carloniere	612,210,864	65%
laviniatherapist	2,694,463,634	55.25%
gifty-e	514,463,270	65%
imcore	1,016,188,704	10%
jacksondavies	1,710,806,731	32.5%
thomaskatan	1,246,703,417	45.5%
guider	7,256,395,534	32.5%
netzisde	3,589,925,182	32.5%
trisolaran	18,206,009,807	32.5%
dawizy	1,022,517,188	52%
hardaeborla	5,460,283,246	32.5%
ihal0001	641,549,358	32.5%
femseen	963,973,349	70%
mayorfaruk	3,390,356,827	19.5%
fabrik	2,234,200,524	65%
thedailysneak	1,686,726,562	2.15%
juanhobos	515,825,218	32.5%
montanacellist	2,663,496,631	32.5%
yestermorrow	3,796,517,169	9.75%
marivic10	13,366,403,728	32.5%
cynicalcake	890,304,596	32.5%
sbi7	301,925,854,619	81.05%
gamercreed	2,597,613,660	31.85%
pboulet	40,118,809,248	35%
babysavage	593,460,364	4.31%
jenniferjulius	1,237,709,008	32.5%
paololuffy91	1,238,681,612	26%
predict-crypto	2,333,758,295	1.3%
edward-abu	513,020,581	65%
topworlds	2,879,990,103	52%
ennydee	531,002,038	32.5%
starbooks	1,790,556,504	32.5%
solox	11,761,755,792	65%
martinstomisin	1,380,279,770	32.5%
steemegg	9,079,478,624	32.5%
jtm.support	2,477,994,465	32.5%
ctime	105,911,528,604	1%
eternalsuccess	60,724,298,165	65%
ava77	559,179,053	16.25%
jackramsey	9,516,887,912	45.5%
hungryanu	1,362,051,415	19.5%
swirly	3,230,253,408	32.5%
tomlee	3,587,929,414	45.5%
hyborian-strain	756,383,270	9.75%
sbi-tokens	1,363,917,843	4.31%
hjmarseille	1,837,025,101	45.5%
mengene	3,704,778,614	32.5%
spiritking	510,713,413	100%
laruche	1,544,503,526,451	35%
ykretz	1,101,427,057	3.5%
peterpanpan	6,595,813,237	6.5%
hive-143869	66,128,275,189	35%
ayoyemi1	624,983,174	32.5%
abkevwe	535,969,480	32.5%
lithajacobs	665,866,031	17.5%
hive-homeland	765,413,767	32.5%
dotnb	633,197,458	32.5%
ilovegames	3,275,475,971	13%
buildahouse	2,149,603,715	35%
ifeoluwaunusual	1,974,292,061	32.5%
casilokodesing	697,738,930	32.5%
rohansuares	6,415,323,395	100%
lancergrows	503,310,052	32.5%
vonzeppelin	1,155,913,763	32.5%
shamzy	3,665,395,771	32.5%
b0s	1,157,214,292	32.5%
mundo.curioso	380,037,295	100%
entraide.rewards	1,144,883,645	35%
tomlee.sports	565,364,023	45.5%
din0baba	742,991,370	32.5%
creodas	1,943,599,995	75%
samuelmarcano	584,173,194	65%
chuxter	871,584,776	32.5%
pthker2010	1,148,435,275	32.5%
fractaldreams	522,500,966	32.5%
germangenius	2,368,936,494	32.5%
kalivankush	2,017,479,020	32.5%
hive-189901	2,526,352,592	32.5%
rencongland	8,187,921,039	32.5%
renanzeirah	875,518,801	32.5%