score:0
just incase you've tried everything with no solution, make sure you're working on your computer's drive and not saving your project on an external drive. this was my issue, i simply moved the project to my computer's drive and it worked perfectly. happy coding guys!
score:1
there is a hot reloading issue for some browsers, with react version 17.
below is the simplest way to fix this:
go to
package.json
and replace react,react-dom
andreact-scripts
dependencies with below:"react": "^16.13.1" "react-dom": "^16.13.1" "react-scripts": "3.4.3"
delete the
node_modules
folder.run
npm install
(it will install all the dependencies again)start your cra project with
npm start
this will fix the hot reloading issue.
score:1
change your file index.js
to index.jsx
. it worked for me.
score:2
if your page is not loading automatically then you have to do these steps:
- add
.env
file - add
skip_preflight_check=true
in.env
file
score:3
there were a problem with react-scripts version 4.0.1 in package.json file. i have replaced it with 'react-scripts' : '3.4.4' and now its working. for more info: https://github.com/facebook/create-react-app/issues/9984
score:5
score:6
this could be due to your filesystem, file extensions or the create-react-app default webpack/project configuration. you don't necessarily have to change all of this because hot-reloading is supposed to work out of the box, and more so if the project has just started.
for example, i once had an issue with a typescript installation(^17.0.1) where some files with extension .ts will not trigger hot reloading. i had to change to .tsx and add a react import. the same could happen with .js and .jsx files.
in case of problems with your filesystem (unix, mac) you can try the react config (fast_refresh=false) here... or changing folder names, but i haven't bumped much into this.
score:6
to solve the problem in hot reloading/fast_refresh i simply add chokidar_usepolling=true in package.json:
"scripts": {
"start": "chokidar_usepolling=true react-scripts start", //add this line
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
score:11
there was an issue - https://github.com/facebook/create-react-app/issues/9904
a workaround is putting below code in index.js to enable reloading
if (module.hot) {
module.hot.accept();
}
you must restart your server after making this change
Source: stackoverflow.com
Related Query
- React create app hot reload is not always working on linux
- Docker Create react app hot reload not working
- Hot Reload is not working in my React App
- Hot module reload is not working on my nextjs app
- React hot reload not working with webpack 4
- React hot reload not working
- Visual Studio React Typescript webpack-dev-server hot reload not working for component changes
- Webpack 4 hot reload not working with React TypeScript
- Electron react app hot reloading from src folder not working
- Hot reload is not working with clean react project?
- React app not working in Internet Explorer 11
- Create React App not working
- Create react app, reload not working
- React router not working after building the app
- CSS 100% height not working in React app
- Breakpoints not working debugging React app in Chrome through Visual Studio Code on Windows 10 and WSL2
- Reactstrap Bootstrap Navbar not working in react app
- Media queries not working with styled components in React App
- Nginx and Create React App (with React Router) full routes not working
- Create React App http-proxy-middleware not working
- Enable single page app react hot reload webpack
- React app is not working in IE 11 browser
- Webpack url-loader or file-loader not working react app
- webpack and react jsx - hot loading not working with docker container
- Firebase user.updateProfile({...}) not working in React App
- Google Optimize not working with React App (no cookie set)
- Webpack Hot Module Reloader not working with React Stateless Component
- React router after adding createBrowserHistory, the app is not working as expected
- Using emmet with a react app in vs code is not working
- Why my debounce functionality is not working in a React app with hooks?
More Query from same tag
- Issues rendering data fetched with useEffect in a custom hook
- React js: fail to get specific product data when clicking on one product
- react code splitting: is the argument for the import() function not a string
- React Class this.ref.current.scrollIntoView not scrolling when it should
- How to use React Context API to have a state across multiple Routes?
- Why to store data in state in react
- How to set React initial state based on radio buttons?
- React JSON mapped data. Trying to pass a setState variable from mapped function will not get the latest state on render
- Can't map an object, fetching an api returns first undefined then the object
- How do I use a browser specific vanilla JS library in react with dependancies
- 'Redux' is not defined error
- Add marker on clicking openseadragon viewer
- React onClick changes Paginated data one step Behind
- Render a div in React with an initial scrollTop value set
- React: Dropdown not closing on tap outside
- Module not found: 'draft-js-export-html'
- How to filter and set the Array items based of DDL Select value change in ReactJS?
- Nested Row with Table Row with Bootstrap 4 / ReactJS
- Can I track multiple checkboxes with React Hooks or do I need to use a Class component?
- Flow: optional prop that uses generic types
- Cannot read property 'displayName' of undefined. React+Jest+Enzyme
- Module not found: Can't resolve '@material-ui/icons/ContentCut'
- how to call function with parameter in JSX?
- curly braces in es6 and react
- Scroll with keyboard's up/down arrows keys in React?
- How handle with object keys when we type dynamic objects?
- How to pass string only rather than the entire event in the onchange?
- How to override react-bootstrap colors?
- Should I hardcode data or use props in React?
- JS React "event.key" throwing errors when using a fetch API call