Question 44129 in Html Question posted in
Some basic documentation can be found here.

Why do I have to rerun the server on every change of my react app? – Html

I’m making my first project using react, until now I never used any other framework, only pure html+js+php+nodejs.
So, I was building a portfolio spa, but I’ve got this issue. When I make any change in the project, I have to restart the entire server to make it actualize. I’m pretty sure it’s not supposed to happen.

to be more precise, I’ve created a react app using cra (npx create-react-app if I remember) and I’m running the server with "npm start".

This aside, I’m using VSC as my IDE on Win 11 and my terminal is on wsl: kali linux

Here is my App.js

import React from 'react';
import './App.css';
import './layer1.svg';
import Menu from './components/menu';
import Portfolio from './components/portfolio'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'





function App() {
  return (
  <div>
    <Menu/>
    <Router>
        <Routes>
        <Route path="/portfolio" element={<Portfolio />}/>
        <Route exact path="/" element={<Portfolio />}/>
        </Routes>
    </Router>
    </div>
  );
}

export default App;

here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
if (module.hot) {
  module.hot.accept();
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

I’ve made a lot of research to try to solve my issue, here’s what I tried:

  1. increasing my max user watches to 524288
  2. adding a ".env" file with FAST_REFRESH=false in it
  3. adding:
if (module.hot) {
  module.hot.accept();
}

into my index.js

  1. modifying my package.json .scripts:
  "scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start", //here
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

but nothing works.

I am expecting the changes to appear in my browser, either auto, or even by reloading the page.

Huge thanks to anyone that can help me 🙂

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue was that I used npx create-react-app to create my react project, it's quite outdated. Switching to Vite, I can now restart the server in under 1sec and refresh the page, just by typing "r" in the console. So I don't even have to use hot reload or anything.

    If you have the same issue, try create a new React+Vite project (https://vitejs.dev/guide/) and migrate your files to the new project, you might have to change a few things but it will be worth it.


  2. 0

    You can do this by installing the npm-watch package like this:

    npm i --savedev npm-watch

    Then you can make a new script in your package.json:

    "scripts": {
  "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
  "watch": "npm-watch"
},

    And it should automatically rebuild with the npm run watch command.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search