question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Browser DOM doesn't reload/reflect changes after edits are made (Windows 64-bit)

See original GitHub issue

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Many errors, especially related to “missing modules”, are due to npm bugs.

If you’re using Windows, follow these instructions to update npm.

If you’re using OS X or Linux, run this to update npm:

npm install -g npm@latest

cd your_project_directory
rm -rf node_modules
npm install

Then try to reproduce the issue again.

Can you still reproduce it?

Yes

Description

What are you reporting?

React-create-app doesn’t make DOM changes when edits are made to App.js. Refresh doesn’t show changes and hot module reload doesn’t trigger. The app is boilerplate and no additional modules have been added.

Expected behavior

Tell us what you think should happen.

DOM should reflect changes made in the editor.

Actual behavior

Tell us what actually happens.

Nothing changes when code is edited nor when I refresh the browser. Even after code edits are made and hot module reload is set, I cannot get the DOM to reflect my changes until I kill the process. Other than that, the app starts successfully and renders the initial content. When I kill the process and restart, it shows my code edits but still allows no changes.

Environment

Run these commands in the project folder and fill in their results:

  1. npm ls react-scripts (if you haven’t ejected): – react-scripts@0.9.5
  2. node -v: v6.9.5
  3. npm -v: 4.5.0

Then, specify:

  1. Operating system: Windows 7 64bit
  2. Browser and version: Chrome 57.0.2987.133

Reproducible Demo

Please take the time to create a new app that reproduces the issue.

Un-installed and Re-installed and nothing had changed.

Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.

(Accidentally, you might get to the root of your problem during that process.)

Push to GitHub and paste the link here.

By doing this, you’re helping the Create React App contributors a big time! Demonstrable issues gets fixed faster.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
gaearoncommented, Apr 13, 2017

no parentheses in the filepath

Are you sure?

Program Files (x86)

1reaction
Arkinecommented, Apr 13, 2017

Doh! Didn’t realize that it added it though we don’t see it. Will edit and re-test.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Force DOM redraw/refresh on Chrome/Mac - Stack Overflow
I change the element for a div (it was a span) and now the browser redraws the changes correctly. I know this is...
Read more >
Unstable updates. Now hot reload and window position ...
Hot reload. When I do code change, it says in bottom left corner "No code changes were found". · Browser window position gets...
Read more >
Page: DOMContentLoaded, load, beforeunload, unload
When the browser processes an HTML-document and comes across a <script> tag, it needs to execute before continuing building the DOM. That's a ......
Read more >
WebView - Android Developers
android:animateLayoutChanges, Defines whether changes in layout (caused by ... Private browsing is no longer supported directly via WebView and will be ...
Read more >
Ahk reload - Tiefenarbeit an der Erd-Schale e.V.
Reload. This command is useful for scripts that are frequently changed. ... screen in the browser). exotic feathers After adding this script, my...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found