Development Server is not auto refreshing while making changes to a component in React

JavaScript
1

I am beginner learning React. I am having a problem when I delete all the boilerplate files except index.js in order to start from scratch.

I create my first “hello world” component and then start the dev server. The browser opens up and shows my component but when I change “hello world” to “hello people” the component displayed in browser is still “hello world” and I have to refresh the browser to show “hello people”.

blabla
blabla800×450 963 KB

There is no any error showing in console. The only thing that is in the console is [HMR] Waiting for update signal from WDS...

I am a beginner and did a lot of searching on how to fix this but I couldn’t solve it. Please suggest something that may fix the problem.

1 Like
2

Here is a stackoverflow issue about the problem you are facing:

I would however suggest you to create a fresh installation of Create-react-app in a different folder, and see if the problem is solved by doing that.

3

I spent 2 days browsing through internet to find a solution but yet, I can’t find one. As per the solutions in stackoverflow, They didn’t work for me either.

4

Does it work with the second link (the one after On Your Network)?

5

I didn’t understand the question.

6

Does auto reload works on http://192.168.100.136:3000 ?

7

No it doesn’t.
The problem starts to occur when I delete the App.js file so there must be something that is connected to App.js file.

8

Only thing I could think of is that you didn’t restart the dev server after deleting App.js.

9

Hello there,

Just my best guess: HMR is not watching index.js for any changes. That is, it could be specifically excluded from the watch directory.

Hope that helps

10

Please tell me how to solve this…?

11

If what I suspected is the case, it would be janky to work around, because CRA is not made for tweaking. The easiest thing you can do is re-create App.js and work in there the way it was made. (It does not necessarily need to be named App.js, it must just not be named index.js)

Is there a particular reason you wanted to delete it?

Alternatively, you can learn how to create a React app from scratch, using Webpack to build and watch the files, and Babel to transpile the React to JavaScript. there are plenty of YouTube tutorials out there on how to do this, and if you plan to create more complex apps, it would be beneficial to learn

Hope this helps

1 Like
12

Is there a particular reason you wanted to delete it?

I actually deleted it because in the youtube video (which is from freeCodeCamp by CodingAddict) also deleted them.

13

It’s a bit headache really.
Now there’s an error in console saying
Manifest: Line: 1, column: 1, Syntax error.

The reloading problem was solved as per your suggestion by the way.

14

Would you mind linking to your project code:

  • GitHub repo
  • Online IDE (e.g. Repl.it, CodeSandbox, Glitch)

We cannot really help without that information. Thanks.

15

https://github.com/nimeshakya/react-practice.git
I created a GitHub repo. I hope it works.

16

That has very few of your files.

17

I am just a beginner see, I was just creating a “hello world” component.
The auto reload problem almost made me “not like” ReactJS

18

I understand the frustrations, but all I can see is:
image

This includes none of your own code, nor enough code for me to be able to re-create your project. (There is no JavaScript or React in the linked repo)

Are you able to provide any more information?

19

Sorry, please check again.

I got a screenshot of my window. Here it is.

Screenshot (153)
Screenshot (153)1366×768 180 KB

20

Thank you, I can see the files now.

Regarding the above error you see, it will likely go away, if you remove this line: https://github.com/nimeshakya/react-practice/blob/82e8104276bb820c772e71c9480c7dca327e092a/public/index.html#L17

However, I believe the error is related to the build package (which is not pushed to GitHub, and should not be pushed). That is, when CRA builds your app (when viewing), it should create a manifest. The error sounds like something has gone wrong with the build.

Also, I notice you do not import React in App.js react-practice/App.js at main · nimeshakya/react-practice (github.com)

Try adding this at the top of the above mentioned file:

import React from 'react';

Hope this helps

2 Likes