React app stuck on "Starting the development server"

Question

I have a react app created by create-react-app. After running npm start (the start script is present in package.json as "start": "react-scripts start") the console says Starting the development server as usual and fires up the browser. But after this both the console and the browser do absolutely nothing indefinitely. No error or output. It simply does nothing.

Strange. Is it every time when you create a new project using create-react-app? — Nikhil Goyal, Nov 07 '19 at 06:50
can you share the screen shot of the terminal, check whether any applicaiton is running in port 3000, may be that can be the issue (guess !!), in the terminaly it will be asking for to press yes or no to open the application in another port. — Learner, Nov 07 '19 at 06:52
Yes every time I start the app it starts on a new port. This happens because a Node app remians running on the port that I ran it on. I stop the app using CTRL+C which closes it in the terminal but task manager shows processes still running. I tried killing these processes from task manager and from terminal using taskkill but both fail. The latter gives error saying "There is no running instance of this process." Starting the app again prompts me to use a different port (3000, 3001, 3002, etc..) which I responed to with yes but again I come to a stop at the "Starting the development server" — kenneth-rebello, Nov 08 '19 at 07:11
I would share screenshots but there's literally nothing to show. The terminal will not scroll back up from "Starting the development server" and the browser only keeps loading indefinitely. — kenneth-rebello, Nov 08 '19 at 07:12
After a few exhausting hours spent to no avail I went ahead and resetted my entire PC (it's relatively new so wasn't a hassle). Even uninstalling Node and reinstalling it did not solve this. The zombie processes running on ports 3000 and others remained even after uninstall but cleared out on rebooting the PC. — kenneth-rebello, Nov 08 '19 at 07:20
can you upload your i. package.json file contents ii. what version of node you are using iii. OS iv. and If it belongs to any organization( which may have put port permissions) or is it your personal system. — Anmol Bhardwaj, Jan 20 '20 at 12:47
You should log the error or try to find more information here: https://github.com/facebook/create-react-app/issues. I think you need to specify more information, like package.json file, or console errors. — hiad, Jan 22 '20 at 00:38
Try to update npm,then react-scripts would get updated. it worked for me. — Hamid Shoja, Jan 22 '20 at 09:23
You can use `lsof -i :3000` to see what is listening on port 3000. If it is a node.js process, you can also do `killall node` to end all node.js processes. — adamrights, Jan 23 '20 at 18:23

score 21 · Accepted Answer · answered Jan 20 '20 at 22:39

I have something similar happening to me.

I have a react project that I want to convert to Typescript and I started as you noted with the "create-react-app", added all my files and hoped for the best - but got stuck like you on the “Starting the development server” message.

I have an 8GB Ram with Windows 10 and once I used the default "npm start" for the first time I've seen the node process uses a lot of memory - So I tried to give it more and at the same time I tired to change the port react uses.

Added this to the start script in package.json:

"scripts": { "start": "PORT=3001 react-scripts --max_old_space_size=8128 start", ... }
Closed all my chrome browsers (they take pretty much memory)
And gave it around 1 minute to run

After 1 minute it started working and from that point it just starts quickly and not uses as much memory and not depended on the port I choose

In my case - I guess the first time you run "npm start" on the React Typescript project it probably index the files (or does something similar - I'm not sure and probably need to read about it - I'm new to typescript) which take a lot of memory.

In your case - It might be something similar

Hope it helps :)

Closing Chrome browser was all it took for me. Thanks! – Ian Dec 24 '21 at 22:19 — Ian, Dec 24 '21 at 22:19

score 15 · Answer 2 · answered May 26 '21 at 21:10

15

First time you run the command it takes about 5 minutes before the page loads.

answered May 26 '21 at 21:10

Richard Vartan Melkonian

707
2
6
13

2

Yep, this. Also happened to me on an existing project that I hadn't touched for a few weeks. – Chris Perry Jun 06 '22 at 00:01
Same happened to me after I performed `npx update-browserslist-db@latest` – neolei May 24 '23 at 06:45
Do we know WHY it takes longer on the first run? Is it indexing files or downloading something? – aarowman Jul 21 '23 at 17:41
I have an issue where it runs for 5 minutes every time on our pipeline, and I'm wondering if it's because of this issue - everytime is treated as the first. Can I save/cache any other files to make this faster later? – aarowman Jul 21 '23 at 17:41

score 8 · Answer 3 · edited Sep 26 '22 at 04:07

8

Check these two points

Run npm install command before you start the server.

Then if it is still not running, please try the second command

Remove the node modules and run npm install once again.

If these two points didn't work, please provide a screenshot for further analysis.

edited Sep 26 '22 at 04:07

RyanS

627
1
10
26

answered Nov 07 '19 at 07:41

Jerrin stephen

204
3
12

I tried both methods and both failed me which led me here :( Another point to be noted is that the package contained few dependencies that had vulnerabilities. Could this be a reason? The "npm install" too hangs sometimes but after trying multiple times it works eventually. The usual hang points are "sill install executeActions" and "postinstall: verb lock using " – kenneth-rebello Nov 08 '19 at 07:12
@kenneth-rebello provide the screenshots while you run the NPM start comment. If you create a app using create-react-app , packages installed by this command will not have any vulnerabilities. Did you tried to install any packages ?? – Jerrin stephen Nov 08 '19 at 13:32
Having the same issue and tried this on a fresh clone and still no luck. – Simon Long Jan 16 '20 at 15:47
1

I also noticed that npm build hangs as well. This would suggest that compilation is the issue. However I see nothing in the console or in the npm logs. Don't know where to go from here without anything to go on. – Simon Long Jan 16 '20 at 18:37
I tried your method several times but it was failed. – MsiLucifer Dec 16 '20 at 18:27

score 3 · Answer 4 · edited Dec 31 '20 at 20:17

3

I created my react app by create-react-app too.

I've tried all the method mentioned above. But it didn't work for me.

Then I accidentally found out if you have unused import or any unused statements. You will stuck.

My react version is 17.0.1.

edited Dec 31 '20 at 20:17

Dharman

30,962
25
85
135

answered Dec 31 '20 at 20:11

Dr.Bit

719
1
6
14

2

This is a issue with react-scripts itself, they need to fix it. Something related to eslint. – Fabio William Conceição Jan 21 '21 at 16:11

score 3 · Answer 5 · answered Sep 28 '22 at 18:07

3

FWIW, I restarted my macbook, changed nothing and everything worked again ‍♂️

answered Sep 28 '22 at 18:07

chrismarx

11,488
9
84
97

1

same. Bonkers that "turn it off and on again" is the best solution to this :-) – Devon Mar 21 '23 at 02:20

score 1 · Answer 6 · answered Jan 22 '20 at 17:45

Make sure that your dependencies in package.json includes the following:

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"

And scripts to be:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

Once you ensure that, you can follow the following steps:

1. npm install
2. npm run build
3. npm start

Hope will works for you.

score 1 · Answer 7 · answered Jan 07 '21 at 07:07

the same problem as i met; npm start but got stuck like you on the “Starting the development server” message. after i trying the following ways but didn't worked:

npm install
npm run build
npm start

it seems not the version matter.

finally, i recheck my code, and found the mistake that's the cause of development server fail to start:

useEffect()

this is the hook incorrect using, maybe i forgot to finish it; then i fixed it, and npm run start, it worked, server started successfully.

you are right, but it keeps showing in terminal we are missing dependency so add it inside [] and if we do so we call useEffect for infinite times , is there any good way ? — faijan memon, Jan 13 '22 at 05:58

Simon Long · Answer 8 · 2020-01-17T15:45:18.297

Finally solved this. For me the issue lay in my webpack configuration. I had a webpack alias in there whose alias name was the same as the name of my npm package.

i.e. My package.json had the following at top.

"name": "@mycompany/react-common-components"

Within my webpack.config.js I had

alias: {
        '@mycompany/react-common-components': path.resolve(__dirname, '../src/components')
      },

Once I changed the webpack alias to the following everything worked fine

alias: {
        'react-common-components': path.resolve(__dirname, '../src/components')
      },

score 0 · Answer 9 · answered Mar 28 '20 at 11:02

0

had the same issue, I had to build it first

npm build then npm start

I was running react on my Mac and had to give permission for the terminal to interact with chrome before it worked.

answered Mar 28 '20 at 11:02

Bluephlame

3,901
4
35
51

score 0 · Answer 10 · answered May 07 '21 at 02:01

0

This is my react version: "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3",

My node version is 12.18.1, and it didn't work. I try to change the version to 14.15.0, and then run success.

answered May 07 '21 at 02:01

Wright Wu

17
1

Please do not post this as an answer to another person's question, but as your own question. Nobody will be able to help you here. – phry May 07 '21 at 06:59

score 0 · Answer 11 · answered Mar 05 '22 at 10:21

For me, the problem was the name of the parent directory. For some reason it choked on "#" when I tried to install into a directory named "#TEMP". Switched to another directory with success.

This has previously worked on my old MBP i9, I'm now on a MBP M1 Monterey 12.2.1.

score 0 · Answer 12 · answered Apr 19 '23 at 07:26

0

Running lint can also give you hints (often caused by html tags not closed, etc.):

npm run lint

answered Apr 19 '23 at 07:26

Peter Kalef ' DidiSoft

1,454
17
21

score 0 · Answer 13 · answered Apr 19 '23 at 19:16

0

If you have a useEffect in App.js, try removing that once, it worked for me.

answered Apr 19 '23 at 19:16

ashrth

63
7

score -1 · Answer 14 · answered Jan 23 '20 at 17:09

I believe you may have some issues with Node and npm. I would recommend checking the versions first - you’ll need to have Node >= 8.10 and npm >= 5.6 on your machine, and update if needed. It could worth trying to reinstall node.

Checking into node logs could provide some clues on your issue (more information on how to log here)

score -1 · Answer 15 · answered Feb 22 '20 at 12:35

-1

I was also having the same issue. Try installing a previous version of react-scripts.

npm install react-scripts@2.1.8

Hope this helps!

answered Feb 22 '20 at 12:35

Tayyab Ferozi

464
1
6
20

score -1 · Answer 16 · answered Apr 30 '20 at 17:49

-1

For me the issue was that I had .css files.

I renamed my css files to .scss and it works.

For some reason create-react-app chokes on CSS files for me.

Weird.

answered Apr 30 '20 at 17:49

Oliver Watkins

12,575
33
119
225

score -1 · Answer 17 · answered Dec 04 '20 at 04:18

My team also faced this same issue but we managed to solve it.

Run npm install to update packages
then run npm audit fix to fix vulnerabilities
Finally close all browser tab to free up RAM. I have seen node processes take a significant amount of memory.
Run npm start and the development server spins up within a minute or two.

NOTE

Make sure that your dependencies in package.json includes the following:

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"

And scripts to be:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

Once you ensure that, you can follow the steps given above.

score -1 · Answer 18 · answered Dec 20 '20 at 20:33

-1

I ran into this issue. In my case, there was an .eslintcache file that had incorrect information in it, and was causing an issue. Simply deleting the file solved it for me.

answered Dec 20 '20 at 20:33

Bronzdragon

345
3
13

score -1 · Answer 19 · edited May 01 '21 at 14:49

-1

For me, it was because of using StrictMode, the server starts, but the app keeps loading for a long period.

edited May 01 '21 at 14:49

Ajeet Shah

18,551
8
57
87

answered May 01 '21 at 13:33

Marwen Aouiti

33
7

score -1 · Answer 20 · answered Feb 08 '22 at 06:39

-1

Here are tow points checked:

Remove package.lock and node_modules, re-install: npm i.
Check the node version. Maybe you currently use version is 12.0.0, but this project limited 14.0.0.

answered Feb 08 '22 at 06:39

wenxuan feng

57
1
6

score -1 · Answer 21 · answered Mar 18 '22 at 19:20

-1

I had similar issue. I just opened chrome to check if it's actually running on there (chrome is my default browser for vs code) and npm could then run the next step after that. So try opening the browser if you're stuck on "starting dev...."

answered Mar 18 '22 at 19:20

Aryan Mehta

9
2

score -1 · Answer 22 · answered Jun 04 '22 at 04:12

this error can occur because of multiple reasons , my particular case (as shown in the picture attached) occurred abruptly when I was installing splide and styled-components probably because of some vulnerabilities My error was resolved by running npm audit fix --force

React app stuck on "Starting the development server"

22 Answers22