create-nuxt-appのエラー解消

初めてcreate-nuxt-appしてみたけどいろいろエラーがでた・・・。

f:id:tiwu:20190715151048p:plain

初めてだったからいろいろ盛ってみた。

エラー1

f:id:tiwu:20190715151208p:plain

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

f:id:tiwu:20190715151333p:plain

DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

ぐぐるといろいろ出てくる。

qiita.com

e-joint.jp

hsuzuki.hatenablog.com

どうやらNuxtのPWA Moduleが原因っぽい。

いろいろ調べたら下記Issueを発見。

github.com

Versionを上げれば治るらしいので試す。

自分のところだと"@nuxtjs/pwa": "^2.6.0",だったので、"@nuxtjs/pwa": "^v3.0.0-beta.16",に変更して、yarn instal(5分くらいかかった)。

無事解決

エラー3

f:id:tiwu:20190715152639p:plain

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タグは治っていないんだけど、とりあえずこれで全エラーは解消された。

f:id:tiwu:20190715155010p:plain

余談

ビルド中が可愛い

f:id:tiwu:20190715155246p:plain