Cant load a react app after starting server

Question

(node:13176) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use node --trace-deprecation ... to show where the warning was created) (node:13176) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option

FYI: an issue has been created for it: https://github.com/facebook/create-react-app/issues/11860 — Monica Granbois, Jan 03 '22 at 17:03
This is a warning and shouldn't stop your program from running. Did you try loading the page in your browser? — Code-Apprentice, May 12 '22 at 22:04

score 12 · Answer 1 · answered Aug 25 '22 at 07:43

In file: node_modules/react-scripts/config/webpackDevServer.config.js

like 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));
},

change to

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;
},

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. — Dav, Jan 04 '23 at 00:40
Remember, Never EVER change anything in node_modules folder! Its equivalent of changing something in the generated bundle of js/css. — Sebastian Voráč MSc., May 28 '23 at 07:19
I agree with other comments that you should not edit files in the node_modules folder. Instead you can use the "eject" script as the "react-scripts" package is no longer maintained and then edit this file in your own project. — Michał D, Jul 05 '23 at 12:01

score 11 · Answer 2 · answered Mar 06 '22 at 15:26

I had the same issue. The problem was with the setupProxy.js.

If your setupProxy.js files look like below

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/proxypath', { target: '<target path>' }));
};

Change it as below

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

module.exports = function(app) {
  app.use(createProxyMiddleware('/proxypath', { target: '<target path>' }));
};

As in the error, you have quoted, onAfterSetupMiddleware and onBeforeSetupMiddleware have been deprecated therefore the proxy method is not working as expected. So when you start the server with npm start the browser tries to redirect to the proxy URL. That's why you see as the react app is not loading.

make sure you have the target set to your API URL in createProxymiddleware(), this is one of the causes I ran into for this error — Marty Farce, Apr 28 '23 at 18:02

Yentl VD · Answer 3 · 2021-12-29T05:28:07.687

This is a deprecation warning, meaning that you need to start using the newly suggested way of configuring your middleware. Instead of onBeforeSetupMiddleware and onAfterSetupMiddleware, use the setupMiddlewares-property.

The documentation itself can be found on Webpack's website (in this case here: https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares)

The configuration will look something like this (coming from onBeforeSetupMiddleware and onAfterSetupMiddleware):

setupMiddlewares: (middlewares, devServer) => {
    middleware1(devServer.app)
    middleware2(devServer.app)

    return middlewares
},

Another useful way of fixing this issue is by looking at the code others have written to fix this issue. I found this example to be helpful: https://github.com/facebook/docusaurus/pull/6168

KrisCodes2 · Answer 4 · 2021-12-27T18:32:36.663

I had the same error.

An authentication middleware, in my case AWS Amplify Auth, was changed incorrectly and my webpack config yielded an error. The fix for me was to re-install clean then debug the error.

So delete package-lock.json, delete the node-modules folder, and reinstall with "npm i".

Although this does not get to the root of the issue it should work to at least bring up the Dev Server to view any errors.

score 1 · Answer 5 · answered Dec 24 '21 at 09:05

1

It's just a deprecation warning from one of the libraries you used within the app, have you tried to open http://localhost:3000 on your local? it is supposed to be running fine

answered Dec 24 '21 at 09:05

sushitrash

174
1
8

score 1 · Answer 6 · answered Sep 09 '22 at 10:48

1

I had a similar behaviour. Running the react scripts and then being stuck at the "Starting the development server...". Although it run via "react-app-rewired" I guess this is some general thing with react-scripts.

I updated an existing project from react-scripts 4.0.3 to 5. That was my cause. I tried a lot of things but unfortunately nothing helped. I could not move forward and reverted the upgrade to the v5 of react-scripts.

Maybe this helps someone.

answered Sep 09 '22 at 10:48

Aleks

101
1
12

Are you saying that updating react-scripts to 4.0.3 to 5 resolved the issue (i.e., removed the warning) for you? Or is that what caused the issue? – Woodchuck Sep 28 '22 at 16:43
1

That was the cause for me. – Aleks Sep 29 '22 at 17:17
Yeah, same happened for me. – Dulya Perera Dec 14 '22 at 06:16

score 0 · Answer 7 · edited Jan 26 '23 at 04:23

As one of the top answers mentioned the problem is setupProxy.js but in my case when I added this file, it prevented the development server to start so I didn't have any clues how this file is causing the problem. I wrapped app.use() in a try and catch block and the problem was solved.

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
 try{
    app.use(
        '/api',
        proxy({
          target: 'http://localhost:3001',
          changeOrigin: true
        })
      )
 }
 catch(err){
    console.log(err.message);
 }
}

score -1 · Answer 8 · edited May 18 '22 at 15:14

-1

What fixed it for me was running npm i webpack-dev-middleware.

edited May 18 '22 at 15:14

answered May 18 '22 at 13:33

Dan Ahmed

1

score -1 · Answer 9 · edited Jul 06 '22 at 14:48

-1

Tried changing the names in webpackDevServer.config.js it worked for me.

Open node_modules folder.
Search for webpackDevServer.config.js.
Open the js file and edit it.

edited Jul 06 '22 at 14:48

cursorrux

1,382
4
9
20

answered Jul 05 '22 at 19:17

Abhinav Varma

1
1

Cant load a react app after starting server

9 Answers9

Linked