diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 522a81b9b2b..9d9f29b4f89 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -109,27 +109,22 @@ module.exports = function (proxy, allowedHost) { }, // `proxy` is run between `before` and `after` `webpack-dev-server` hooks proxy, - 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)); + setupMiddlewares: (middlewares, devServer) => { + if (!devServer) { + throw new Error('webpack-dev-server is not defined') + } - 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)); + if (fs.existsSync(paths.proxySetup)) { + require(paths.proxySetup)(devServer.app) + } - // 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)); - }, + middlewares.push( + evalSourceMapMiddleware(devServer), + redirectServedPath(paths.publicUrlOrPath), + noopServiceWorkerMiddleware(paths.publicUrlOrPath) + ) + + return middlewares; +}, }; };