error overlay를 감추는 필드를 추가하면 에러가 발생합니다.

Question

"점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API 함수" > "API 파일에 타입스크립트 적용 및 호출 로직 구현"의 [1분 24초 경] error overlay를 감추는 방식이 변경된 것 같습니다. 저의 경우, vue cli로 프로젝트를 생성하면 vue.config.js가 기본으로 생성되고 있고, 약간의 내용(i.e. "transpileDependencies: true,")이 포함되어있습니다. 일단 무시하면서 진행하고 있는데, 아래의 에러가 발생하고 있습니다. 변경된 방법을 아시나요? [package.json] "dependencies" : { "axios" : "^0.26.1" , "core-js" : "^3.8.3" , "vue" : "^2.6.14" , "vue-router" : "^3.0.1" , "vuex" : "^3.0.1" }, "devDependencies" : { "@typescript-eslint/eslint-plugin" : "^5.4.0" , "@typescript-eslint/parser" : "^5.4.0" , "@vue/cli-plugin-babel" : "~5.0.0" , "@vue/cli-plugin-eslint" : "~5.0.0" , "@vue/cli-plugin-typescript" : "~5.0.0" , "@vue/cli-service" : "~5.0.0" , "@vue/eslint-config-typescript" : "^9.1.0" , "eslint" : "^7.32.0" , "eslint-config-prettier" : "^8.3.0" , "eslint-plugin-prettier" : "^4.0.0" , "eslint-plugin-vue" : "^8.0.3" , "prettier" : "^2.4.1" , "typescript" : "~4.5.5" , "vue-template-compiler" : "^2.6.14" } [vue.config.js] const { defineConfig } = require ( "@vue/cli-service" ); module . exports = defineConfig ({ transpileDependencies : true , lintOnSave : false , devServer : { overlay : false , }, }); [에러 메시지] ----- C:	est\vue-news-ts>npm run serve > vue-news-ts@0.1.0 serve C:	est\vue-news-ts > vue-cli-service serve INFO Starting development server... ERROR ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'overlay'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'overlay'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } at validate (C:	est\vue-news-ts
ode_modules\webpack-dev-server
ode_modules\schema-utils\dist\validate.js:115:11) at new Server (C:	est\vue-news-ts
ode_modules\webpack-dev-server\lib\Server.js:232:5) at serve (C:	est\vue-news-ts
ode_modules\@vue\cli-service\lib\commands\serve.js:183:20) at processTicksAndRejections (internal/process/task_queues.js:93:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-news-ts@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-news-ts@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\sundlee\AppData\Roaming
pm-cache\_logs\2022-03-20T14_22_26_938Z-debug.log C:	est\vue-news-ts> ----

캡틴판교 · Answer

안녕하세요 용해님, 학습 열심히 하고 계시는 군요 :) 아 저건 웹팩 데브 서버의 속성을 따라가는데요. 최근에 옵션 속성 구조가 아래와 같이 바뀌어서 그렇습니다. devServer: { client: { overlay: false } }