Monacaチームの小田川です。

MonacaのCordova 11サポートが開始されてから1ヶ月以上が経ちました。Cordova 11の内容や注意点につきましては、下記を参照してください。

• Cordova 11について
• Cordova11 サポートの開始
• MonacaのCordova 11サポートについて

Cordova 11用のビルドサーバーでは、npm8系が利用されています。Cordova 11未満のビルドサーバーでは、npm6系が使用されているため、npmのバージョンの違いによるビルドエラーが発生するようになりました。

Cordova 11用のMonacaプロジェクトでは、MonacaクラウドIDEのビルド環境の設定画面から、ビルドの際に実行されるnpm installコマンドに対して、オプションを選択できるようになっています。

ビルド環境設定画面

今回は、Cordova 11のnpmに関するビルドエラーと対応方法について見ていきたいと思います。

npm7系からpeerDependenciesに対する処理が変更されたことにより、package.jsonの構成によっては、ビルドの際に以下のようなエラーが出力される場合があります。

エラーの抜粋：
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

対応方法としては、package.jsonのdependenciesやdevDependenciesに設定されている対象パーケージのバージョンを修正するかpeerDependencies側の設定を修正することで対応する事ができます。

場合によっては、上記の対応を行うことが難しい場合があります。その場合は、npm installコマンドに対して、--legacy-peer-depsオプションを追加することで、peerDependenciesの処理をnpm6系と同じように処理させる事が出来ます。

Cordova 11用のMonacaプロジェクトでは、–legacy-peer-depsオプションを利用する事が可能になっています。–legacy-peer-depsオプションを利用する場合は、MonacaクラウドIDEのメニューにある、

ビルド > ビルド環境の設定 > その他 > npm install コマンドオプション > --legacy-peer-deps

の有効にチェックを付けて保存することで、ビルドの際に実行されるnpm installコマンドに対して、–legacy-peer-depsオプションを追加して実行させる事ができます。

Cordova 10用として提供していたFramework7用のテンプレートプロジェクトをCordova 11へアップグレードした場合、以下のようなエラーが発生する場合があります。

エラーの抜粋：
+ npm install --production
> framework7-vue-webpack@2.5.0 prepare
> npm run copy-fonts
> framework7-vue-webpack@2.5.0 copy-fonts
> cpy node_modules/framework7-icons/fonts/*.* src/fonts && cpy node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2} src/fonts
sh: 1: cpy: not found
npm ERR! code 127
npm ERR! path /tmp/download
npm ERR! command failed
npm ERR! command sh -c npm run copy-fonts

Cordova 11用のビルドサーバーでは、ビルドの際に実行されるnpm installコマンドに対して--productionオプションが有効になっています。–productionオプションは、package.jsonのdependenciesに設定されているパッケージをインストールするオプションになります。

上記のエラーは、必要なパッケージがdevDependenciesに設定されているために発生しています。対応方法は、MonacaクラウドIDEのメニューにある、

ビルド > ビルド環境の設定 > その他 > npm install コマンドオプション > --production

のチェックを外して保存することで、ビルドの際に実行されるnpm installコマンドに対して、–productionオプションを追加しない形で実行させる事ができます。

npm installコマンドに–productionオプションを追加しない場合は、dependenciesとdevDependenciesに設定されているパッケージがインストールされます。

Monacaでは、ビルドの際に実行されるnpm installコマンドのエラーに対して、オプションを追加することで解決できる場合は、今後も対応していく予定です。Cordova 11でのビルドの際に、今回紹介したようなnpmに関するエラーが発生した場合は、npm install コマンドオプション設定を試してみてください。