소개

이 기사는 「Nuxt.js 소개 -2.8.1ver-」을 대응하고 있을 때, 설치된 샘플 프로그램이 에러를 내고 있었으므로, 그 이유와 대책을 조사해 정리했습니다.

2019.07.25 추가

현재는 ERROR가 아니고 INFO 레벨이 되고 있습니다만, 에러가 어디에서 일어나고 있을지도 모르고 고생했으므로, 그 해결까지의 흐름을 정리하고 있습니다!

오류 내용

ERROR  (node:22276) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instea

Nuxt 프로젝트를 만들고 npm run dev 시작하면 시작하지만 위와 같은 오류가 발생합니다.

원인 조사

오류 메시지에서 검색

우선은 에러 메시지 그대로 구그 해 보았습니다.

분명히 webpack 버전과 다른 라이브러리 호환성 문제 인 것 같습니다.

"webpack3에서 4로 마이그레이션했을 때 발생한 오류와 작업"이라는 기사가 참고가 되었습니다만, 방금 설치한 Nuxt 프로젝트에는 extract-text-webpack-plugin 라는 라이브러리는 사용되고 있지 않기 때문에, 다른 라이브러리가 원인인 것 같습니다.

어떤 라이브러리가 원인입니까?

지금은 버전 차이로 오류가있는 라이브러리를 모릅니다.
그런 가운데, 어둠 구름에 구구하고 있다고 우연히 발견했습니다.

webpack (node-16181) DeprecationWarning- Tapable.plugin is deprecated. Use new API on .hooks instead 해결 방법

이쪽도 에러가 되고 있는 라이브러리가 다릅니다만, 상세 로그를 표시하는 방법이 소개되고 있었습니다.webpack.config.js 에 process.traceDeprecation = true; 를 지정하면 좋을 것 같습니다!

Nuxt.js의 경우 nuxt.config.js가 설정 파일이므로 거기에 나열된 nmp run dev 해 보았습니다!

분명히 @nuxtjs 라이브러리 중 하나가 원인 인 것 같습니다.

오류 메시지 + @nuxtjs에서 검색

중요한 Issues를 발견했습니다!

Tapable.plugin is deprecated #185

이 문제에 따르면 오류의 원인은 @nuxtjs/pwa입니다.

덧붙여서 이 에러, 장래의 버전 업으로 해소 예정이므로 무시해도 좋을 것 같습니다!

오류 해결

하지만 역시 에러는 신경이 쓰인다… … 라고 하는 것으로 에러를 해소시켜 버립시다!
원인을 확인한 Issues에서 @nuxtjs/pwa의 베타 버전을 넣으면 오류가 해결되는 설명이있었습니다.

@nuxtjs/pwa 버전 확인

> npm info @nuxtjs/pwa versions

이 명령은 버전 목록을 표시합니다.
최신은 3.0.0-beta.16 같아요!

베타 버전 설치

> npm install @nuxtjs/[email protected]

실행하자!

   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt.js v2.8.1                         │
   │   Running in development mode (spa)      │
   │                                          │
   │   Listening on: http://localhost:3000/   │
   │                                          │
   ╰──────────────────────────────────────────╯

i Preparing project for development                                                                           14:20:36
i Initial build may take a while                                                                              14:20:36
√ Builder initialized                                                                                         14:20:36
√ Nuxt files generated                                                                                        14:20:36

√ Client
  Compiled successfully in 5.95s

에라 에이타 와이 (/· ω ·)/

결론

에러를 그대로 검색해 히트한 것이 해결책이라고 생각하고 있어, 해결하지 않고 곤란하고 있었습니다.
해결할 수 없었던 이유는 검색 조건의 부족과 그 부족 부분이 무엇인지 조사하는 수단을 몰랐기 때문이었습니다.
결국 선배의 힘을 빌려 버렸습니다만, 문제 해결의 좋은 공부가 되었습니다!