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

nuxt.js開発関連

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 2.15ではNode.js v12がミニマムサポートとなるのでNode.jsのバージョンをまずはあげます。

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

公式サイトから抜粋(2021-04-10時点)

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

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

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

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

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

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

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

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

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のリリースノート

以上でバージョンアップ作業完了となります。
Node.js v10はまもなくメンテナンス終了となるため、早めのアップグレードをおすすめします。

タイトルとURLをコピーしました