[에러] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

react 컴파일 시 작동은 되지만 터미널에서 다음과 같은 경고가 발생하였다.

(node:20044) [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:20044) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

문제 원인

DeprecationWarning 경고로 ‘onBeforeSetupMiddleware’, ‘onAfterSetupMiddleware’옵션 대신 setupMiddlewares을 사용하라는 뜻이다.

해당 옵션 검색 결과 똑같은 경고가 뜨는 사람들이 많아 해결하기 수월했다. 참고 페이지

---

해결

node_modules/react-scripts/config/webpackDevServer.config.js 로 이동하면 ‘onBeforeSetupMiddleware’, ‘onAfterSetupMiddleware’ 함수를 찾을 수 있다.

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

이를 ‘setupMiddlewares’로 바꿔주면 된다.

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

서버설정 전후로 경우의 수를 나눠 middleware 설정을 추가하는 기존의 함수들를 더 읽기 쉽고 간결한 코드로 표현하여 setupMiddlewares라는 하나의 함수로 바꿔준 듯 하다.

---

원문: Velog