Nuxt.jsを2.11から2.15にバージョンアップしたら起動できなくなった

開発関連

2021.04.10

npm audit fixしてバージョンを一気に上げたらエラーが出て起動できなくなってしまったのでその時のメモ。ついでにNode.js v10のメンテナンスが2021-04-30で終了するのでバージョンアップする手順もまとめておきます。

↓エラーログ

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/xxxx/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/xxxx/node_modules/css-loader/dist/index.js:34:28)

Node.jsのバージョンをあげる
プロジェクトの各種ライブラリのバージョンアップ
Nuxt.jsの起動時にローダーのエラーが出る場合

Node.jsのバージョンをあげる

Nuxt.js 2.15ではNode.js v12がミニマムサポートとなるのでNode.jsのバージョンをまずはあげます。

v12はひとまず2022-04-30までメンテナンスされます。

以下、macでバージョンアップの手順です。

# インストール可能なNode.jsのバージョンを調べます
$ nodebrew ls-remote

# v12系の最新をインストールします
$ nodebrew install-binary v12.22.1

# 使用するNode.jsのバージョンを変更
$ nodebrew use v12.22.1

node.jsのバージョンを上げる

macでは問題なくnuxt.jsが動くのに何故かDockerで謎のエラーがでるようになった時の記録です。発生した問題ある日突然axiosで通信するとこんなエラーが。。。 SyntaxError: Unexpected token { a...

プロジェクトの各種ライブラリのバージョンアップ

ncuでいっきにバージョンアップする場合は依存関係を整理したり、どうしても動かいないものはダウングレードする必要があるので、先にauditで最低限のバージョンアップを試して動作確認してからの実行をおすすめします。私の環境ではeslintとかwebpackあたりは最新にしてしまうと依存するその他のライブラリが整合性とれなくなってしまいました。

# 最低限のバージョンアップ
$ npm audit fix
$ npm install

# 全体的に一気に最新化
$ ncu -u
$ npm install

Nuxtやその他ライブラリのバージョンを一気に上げる

長いこと放置していたアプリを久しぶりにまとめてアップデートする際に便利なパッケージの紹介です。package.jsonの中のライブラリをいっこずつチェックするなんて面倒くさいですからね。。。準備 npm-check-updatesをインス...

Nuxt.jsの起動時にローダーのエラーが出る場合

冒頭のエラーログの対処方法になります。必要なライブラリのバージョンが変わっているため、npm installします。

# yarnを使っている場合
yarn add --dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1

# npmを使っている場合
npm i --save-dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1

Nuxt.jsのリリースノート