CODEWITHSUNDEEP
reactjsnpmcreate-react-appreact-scripts
kenneth-rebello
kenneth-rebello

Reputation: 962

React app stuck on "Starting the development server"

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.

Upvotes: 78

Views: 122241

Answers (23)

Andy G
Andy G

Reputation: 43

My use case is not common but I feel the need to leave this comment because I did not find anyone elsewhere mentioning this as a fix.

I am using parallels on a M series mac and my solution on windows was running into this error. I thought that maybe it was a windows on arm issue, but that was not the case. Parallels shares all of your documents, downloads, pictures, desktop etc with your mac. If you try to run your solution from one of those folders it will fail (maybe due to apfs?)

To fix this issue I moved my project to the native documents folder on my windows drive. The project started right up first try!

Upvotes: 1

ashrth
ashrth

Reputation: 71

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

Upvotes: 0

Peter Kalef ' DidiSoft
Peter Kalef ' DidiSoft

Reputation: 1464

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

npm run lint

Upvotes: 0

chrismarx
chrismarx

Reputation: 12545

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

Upvotes: 4

Jerrin stephen
Jerrin stephen

Reputation: 224

Check these two points

  1. Run npm install command before you start the server.

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

  1. Remove the node modules and run npm install once again.

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

Upvotes: 10

Agastya J
Agastya J

Reputation: 1

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

Upvotes: -1

Aryan Mehta
Aryan Mehta

Reputation: 9

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...."

Upvotes: -1

Emil Lindén
Emil Lindén

Reputation: 19

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.

Upvotes: 1

Hyou
Hyou

Reputation: 77

Here are tow points checked:

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

Upvotes: -1

Richard Vartan Melkonian
Richard Vartan Melkonian

Reputation: 725

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

Upvotes: 17

Wright Wu
Wright Wu

Reputation: 17

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.

Upvotes: 0

Marwen Aouiti
Marwen Aouiti

Reputation: 43

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

Upvotes: -1

J锋_
J锋_

Reputation: 19

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:

  1. npm install
  2. npm run build
  3. 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.

Upvotes: 1

Dr.Bit
Dr.Bit

Reputation: 749

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.

Upvotes: 5

Bronzdragon
Bronzdragon

Reputation: 355

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.

Upvotes: -1

ashuvssut
ashuvssut

Reputation: 2275

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.

Upvotes: -1

Oliver Watkins
Oliver Watkins

Reputation: 13509

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.

Upvotes: -1

Bluephlame
Bluephlame

Reputation: 3969

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.

Upvotes: 0

Tayyab Ferozi
Tayyab Ferozi

Reputation: 546

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

npm install [email protected]

Hope this helps!

Upvotes: -1

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

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)

Upvotes: -1

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 4748

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.

Upvotes: 1

Sharon Lifshits
Sharon Lifshits

Reputation: 473

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.

  1. Added this to the start script in package.json:

    "scripts": { "start": "PORT=3001 react-scripts --max_old_space_size=8128 start", ... }

  2. Closed all my chrome browsers (they take pretty much memory)

  3. 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 :)

Upvotes: 23

Simon Long
Simon Long

Reputation: 1440

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')
      },

Upvotes: 0

Related Questions