Changes made to my JavaScript files in a React project are not reflected in the UI when compiling using 'npm start'. Reflecting only when rebuilt

Initial issue faced: "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema" TO resolve this issue added setupProxy.js inside src folder as follows:

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/",
    createProxyMiddleware({
      target: "http://127.0.0.1:8000",
      changeOrigin: true,
    })
  );
};

After adding this file, the code works fine when built and executed. However, if any changes are made to the JavaScript files, they are not reflected in the UI when saved and compiled using 'npm start'. The changes only appear when 'npm start' is executed after rebuilding with 'npm run build'.

  • Tried different versions of npm and react-script.
  • Removed node modules and installed again.

Expecting a solution to make the changes made in code to reflect in UI without rebuilding the code everytime.

The issue may be due to the inclusion of setupProxy.js. Remove that file and try by adding a proxy in package.json. If the error persists try with higher node and npm versions.

Back to Top