React development server disconnected problem

When ı refresh my page. Logged the console this message " The development server has disconnected. Refresh the page if necessary". What is the problem? I use the current version of react.

And what does it say in the server’s console?

And perhaps more broadly, how are you doing this? Are you using create-react-app?

Yes, I am writing “create-react-app” then ı am writing “npm start”. Exactly it’s says “The development server has disconnected. Refresh the page if necessary”

When you do “npm start”, what happens? Does it open up a console window that is running the dev server?

It doesn’t matter when I say “npm start”. In any case, I get this warning. This happens when I refresh the page. If the page is not refreshed it works properly.

I don’t feel like you’ve answered my question.

It doesn’t matter when I say “npm start”.

I think it matters a great deal. It should be spawning off a console window with your development server. We need to know what is happening there.

In any case, can you put your project in a repo on github so we can take a look for ourselves?

Okay it’s repo, GitHub - BerkayAkgurgen/ProblemForReactJS

So your current project does not have a public folder? When I run npm start, it can can not find public/index.html, which makes sense because index.html is in the root project folder.

1 Like

Yeah, that does not look like a CRA project. I would also expect an src folder.

Problem fixed. You should look.

Is this the first local React project you’ve tried to setup locally or have you succeeded in the past?

My third project. All projects have this problem.

It starts up fine for me.

This is the server console window:

Screen Shot 2021-05-03 at 3.38.13 PM

(I was wrong, with CRA it doesn’t open a new console window for the dev server but takes over the current console window.)

And this is my browser address bar:

Screen Shot 2021-05-03 at 3.39.26 PM

Those should match. The dev server window should be running fine and the address in the address bar should be pointing to your local dev server.
What are they doing in your case?

Ekran görüntüsü 2021-05-04 014211

If ı reload the page. Showing this message

You didn’t answer my (implied) question.

Can you confirm what the address is in your address bar and what the server is saying?

Same as you. Not different.

OK, the “[HMR] Waiting for update signal from WDS…” is new information. It seems to be a problem with the Webpack dev server. I see some discussions online, like here.

What browser is it using?

Do you have CRA installed globally or are you using npx?

And have you tried turning it off and on again?

  1. My browser is Mozilla Firefox.
  2. I not installed the CRA.
  3. Yes, ı did

OK, as far as browsers, can you try Chrome? You can just cut and paste the server address into the address bar and close the old one.

I’m still not clear how this was installed. Is it CRA (create-react-app) or not? The old way to install it would be to install CRA globally and run it through the terminal. The newer way is using npx. It’s possible that you are using some outdated method and getting a weird library mismatch.