[DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE]

[4-Leafs-Code]

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.

[1san1]

Ok i will try this

[4-Leafs-Code]

😃 Thank you so much friend! I'm here if you need me.

[4-Leafs-Code]

@1san1 How are you feeling about this? Is there anything I can do to help? I'm here if you need me.

[1san1]

@4-Leafs-Code I am very sorry that I am unable to look at these issues since I am very busy these days. I am unassigning myself from this issue.

[ANUSHRAV01]

@4-Leafs-Code I find this issue very interesting ,Maybe I don't completely know and never thought about this too as I myself used used to delete the package.json to work on with my React projects somethimes when i find bug
Now, I got a very Informative and nice solution which maybe can help u too
"instead of directly modifying a file within node_modules, you could create a separate file (e.g. myOverrides.js) that contains the customizations you want to make. You can then use a tool like webpack-merge to merge this file with the original configuration."

[ANUSHRAV01]

@4-Leafs-Code I have got reference from the codinasion but i like to help as much 👍
const path = require('path');
const webpackMerge = require('webpack-merge');
const myOverrides = require('./myOverrides.js');

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)
)

// merge the original middleware array with customizations
const mergedMiddlewares = webpackMerge(middlewares, myOverrides);

return mergedMiddlewares;

}

In this example, we define the myOverrides.js file to contain the customizations we want to make to the middleware array. We then use webpack-merge to merge this file with the original middleware array.

This approach allows you to make customizations without directly modifying files in node_modules, which helps ensure that your dependencies remain "clean" and avoids potential issues with future updates.

[ANUSHRAV01]

@4-Leafs-Code ,If u find the response interesting and useful kindly ,inform me too. This motivate me to contribute more to open-source.

[4-Leafs-Code]

@ANUSHRAV01 This sounds like a great solution! We are going to test it out right now and let you know. Thanks so much for this helpful advice.

[4-Leafs-Code]

I'm so happy that FearlessTech will keep you Open Sourcing. This is the best way to keep technology moving in a forward direction.