Our project has this error when you go to run the app from the terminal. I found this article: https://stackoverflow.com/questions/70469717/cant-load-a-react-app-after-starting-server
The most voted answer does correct the issue:
In file: node_modules/react-scripts/config/webpackDevServer.config.js change this:
onBeforeSetupMiddleware(devServer) {
// Keep `evalSourceMapMiddleware`
// middlewares before `redirectServedPath` otherwise will not have any effect
// This lets us fetch source contents from webpack for the error overlay
devServer.app.use(evalSourceMapMiddleware(devServer));
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(devServer.app);
}
},
onAfterSetupMiddleware(devServer) {
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
},to this:
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error('webpack-dev-server is not defined')
}
if (fs.existsSync(paths.proxySetup)) {
require(paths.proxySetup)(devServer.app)
}
middlewares.push(
evalSourceMapMiddleware(devServer),
redirectServedPath(paths.publicUrlOrPath),
noopServiceWorkerMiddleware(paths.publicUrlOrPath)
)
return middlewares;
},A user in this article said, "It is not advised to change files in the node_modules folder. Any changes there will be destroyed once dependencies are installed which should be happening on a production build or CI to ensure your deps are "clean" If, and I stress IF there is a need to update node_modules dependencies then the safer solution is to use patch-package. But this should be as limited as possible and when no other solution is possible, the better and longer term solution is to either open a PR with the changes or jump over to an existing PR and subscribe to it to get updates when it is merged."
The issue here is to figur out what solution solves the problem without altering the node_modules.
Our project has this error when you go to run the app from the terminal. I found this article: https://stackoverflow.com/questions/70469717/cant-load-a-react-app-after-starting-server
The most voted answer does correct the issue:
In file: node_modules/react-scripts/config/webpackDevServer.config.js change this:
to this:
A user in this article said, "It is not advised to change files in the node_modules folder. Any changes there will be destroyed once dependencies are installed which should be happening on a production build or CI to ensure your deps are "clean" If, and I stress IF there is a need to update node_modules dependencies then the safer solution is to use patch-package. But this should be as limited as possible and when no other solution is possible, the better and longer term solution is to either open a PR with the changes or jump over to an existing PR and subscribe to it to get updates when it is merged."
The issue here is to figur out what solution solves the problem without altering the node_modules.