• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

22.03.20 23:28 작성 조회수 1.61k

1

"점진적인 타입스크립트 적용 방식 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:\test\vue-news-ts>npm run serve

 

> vue-news-ts@0.1.0 serve C:\test\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:\test\vue-news-ts\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js:115:11)

    at new Server (C:\test\vue-news-ts\node_modules\webpack-dev-server\lib\Server.js:232:5)

    at serve (C:\test\vue-news-ts\node_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\npm-cache\_logs\2022-03-20T14_22_26_938Z-debug.log

 

C:\test\vue-news-ts>

----

 

 

 

 

 

 

 

 

 

 

답변 1

답변을 작성해보세요.

0

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

devServer: {

  client: {

    overlay: false

  }

}

네~ 알려주셔서 고맙습니다.