create-nuxt-appのエラー解消
初めてcreate-nuxt-app
してみたけどいろいろエラーがでた・・・。
初めてだったからいろいろ盛ってみた。
エラー1
error eslint@5.16.0: The engine "node" is incompatible with this module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0".
どうやらnodeのversionが古く怒られたのでnodeのversionをあげて解決。
エラー2
DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
ぐぐるといろいろ出てくる。
どうやらNuxtのPWA Moduleが原因っぽい。
いろいろ調べたら下記Issueを発見。
Versionを上げれば治るらしいので試す。
自分のところだと"@nuxtjs/pwa": "^2.6.0",
だったので、"@nuxtjs/pwa": "^v3.0.0-beta.16",
に変更して、yarn instal
(5分くらいかかった)。
無事解決
エラー3
12:11 error Replace `⏎··········href="https://nuxtjs.org/"⏎··········target="_blank"⏎·········` with `·href="https://nuxtjs.org/"·target="_blank"`
今度はESLintに怒られる。
どうやらindex.vueのaタグの書き方悪いらしい。
<template> <div class="container"> <div> <logo /> <h1 class="title"> nuxt-sample </h1> <h2 class="subtitle"> My wonderful Nuxt.js project </h2> <div class="links"> <a href="https://nuxtjs.org/" target="_blank" class="button--green" > Documentation </a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey" > GitHub </a> </div> </div> </div> </template>
1 error and 0 warnings potentially fixable with the `--fix` option.
と言われるのでyarn lint --fix
を叩く。
<template> <div class="container"> <div> <logo /> <h1 class="title"> nuxt-sample </h1> <h2 class="subtitle"> My wonderful Nuxt.js project </h2> <div class="links"> <a href="https://nuxtjs.org/" target="_blank" class="button--green"> Documentation </a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey" > GitHub </a> </div> </div> </div> </template>
Documentation
のaタグだけ治って、GitHub
のaタグは治っていないんだけど、とりあえずこれで全エラーは解消された。
余談
ビルド中が可愛い