ひびのログ

日々ではないけどログを出力していくブログ

トップ > JavaScript > 【未解決】Nuxt.js を 2 にアップグレードしたかったけど断念した話

【未解決】Nuxt.js を 2 にアップグレードしたかったけど断念した話

JavaScript npm Nuxt.js

だめだったやり方

前準備

参考：Release v2.0.0 · nuxt/nuxt.js · GitHub

まずは .nuxt node_modules yarn.lock package.lock.json を削除

node >= 10、npm >= 5 が推奨なので、それぞれアップデート。 nodist を利用しているので、

$ nodist 10.15.1
10.15.1
Installing 10.15.1

が、npm のアップデート時に失敗。

$ nodist npm match
npm match
stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^

Error: Failed to read response from https://codeload.github.com/npm/npm/tar.gz/v6.4.1

$ npm i -g npm
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'C:\xxx\Nodist\npmv\6.4.1\bin\npm-cli.js'

# Node を 8 に下げて実行しても……
$ npm i -g npm
Sorry, there's a problem with nodist. Couldn't resolve npm version spec match : Couldn't find any matching version

とりあえず Nodist をアップデートしてみる。
参考：GitHub - nullivex/nodist: Natural node.js and npm version manager for windows.

$ nodist + 8

8.15.0

$  nodist 8
8
Default global pacakge update dsuccessful.

それでも npm のアップデートができなかったので調べてみたら、以下のサイトが見つかった。

qiita.com

ということで URL を書き換えて対応。

sed -r -e 's%codeload.github.com/npm/npm%codeload.github.com/npm/cli%' 'C:\xxx\Nodist\lib\npm.js'

過去にインストールした npm を削除。

rm -rf 'C:\xxx\Nodist\npmv\*'

そして最後に npm をインストール。

$ nodist npm match

$ npm -v
6.4.1

パッケージのアップデート

次に npm パッケージのアップデートをする。 アップデートには npm-check-updates を利用する。

$ npm install -g npm-check-updates

$  ncu
Hmmmmm... this is taking a long time. Your console is telling me to wait for input
on stdin, but maybe that is not what you want.
Try specifying a package file explicitly with --packageFile package.json.
See https://github.com/tjunnone/npm-check-updates/issues/136#issuecomment-155721102

$ ncu --packageFile package.json
Using C:\xxx\package.json

 @nuxtjs/pwa                 ^2.0.8  →  ^3.0.0-beta.6
 nuxt                        ^1.0.0  →         ^2.4.3
 babel-eslint                ^8.2.1  →        ^10.0.1
 eslint                     ^4.15.0  →        ^5.13.0

The following dependencies are satisfied by their declared version range, but the installed versions are behind. You can install the latest versions without modifying your package file by using npm update. If you want to update the dependencies in your package file anyway, run ncu -a.

 eslint-plugin-import  ^2.14.0  →  ^2.16.0
 source-map-support     ^0.5.6  →  ^0.5.10

Run ncu with -u to upgrade package.json

全部ではないけどこんな感じ。

@nuxtjs/pwa だけ beta に上がってしまうので個別でインストールし、それ以外は ncu でアップデート。

$ npm i -S '@nuxtjs/pwa@^2.0.0'

$ ncu -x @nuxtjs/pwa --packageFile package.json -u

かーらーのーインストール。

$ npm i

> nuxt@2.4.3 postinstall C:\xxx\node_modules\nuxt
> opencollective || exit 0


                                     :-:
                                   .==-+:
                                  .==. :+- .-=-
                                 .==.   :==++-+=.
                                :==.     -**: :+=.
                               :+-      :*+++. .++.
                              :+-      -*= .++: .=+.
                             -+:      =*-   .+*: .=+:
                            -+:     .=*-     .=*-  =+:
                          .==:     .+*:        -*-  -+-
                         .=+:.....:+*-.........:=*=..=*-
                         .-=------=++============++====:

                          Thanks for installing nuxtjs
                 Please consider donating to our open collective
                        to help us maintain this package.

                           Number of contributors: 165
                              Number of backers: 160
                            Annual budget: US$ 45,815
                           Current balance: US$ 12,364

                 Donate: https://opencollective.com/nuxtjs/donate

package.json も無事変わっていたのでここでコミット。

起動してみる

yarn dev
yarn run v1.7.0
$ nuxt

 WARN  vendor has been deprecated due to webpack4 optimization


 ERROR  custom keyword definition is invalid: data/errors should be boolean

あっはい……

WARN vendor has been deprecated due to webpack4 optimization

nuxt.config.js で vendor を使ってると警告が出るみたいなので削除。
vue-cliで作ったNuxtスターターキットでNuxt1 => 2に上げるやり方（追記あり） - Qiita

ERROR custom keyword definition is invalid: data/errors should be boolean

まさにな記事があったのでこちらを参照。 ERROR custom keyword definition is invalid: data/errors should be boolean - Qiita

$ npm uninstall ajv
$ npm install ajv@6.8.1

解決したので再実行

$ yarn dev
yarn run v1.7.0
$ nuxt
i Preparing project for development
i Initial build may take a while
√ Builder initialized
√ Nuxt files generated
i Compiling Client                                         webpackbar

 ERROR  (node:14948) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

√ Client: Compiled with some errors in 7.35s               webpackbar

 ERROR  Failed to compile with 2 errors               friendly-errors

These relative modules were not found:                friendly-errors
                                                      friendly-errors
# 略

あっはい……

ERROR (node:14948) DeprecationWarning: Tapable.plugin is deprecated. Use new API on.hooksinstead

Webpack の不具合っぽい？こちらを参照。
webpack3.7.1 => 4.0.1移行ログ - Miobiki

$ npm i -D extract-text-webpack-plugin@next

だがエラーは解消されず。

issue には Node に --trace-deprecation オプションを渡して実行してみてーと書いてあったが、Nuxt に Node のオプションを渡す方法がわからなかったので断念。