OnsenUIの2.11.2へバージョンアップするとmonaca preview起動時にエラーが発生

Question

Monaca + Onsen UI + Vueでハイブリッドアプリを作っています。

前提・実現したいこと

昨年からハイブリッドアプリを作っており、最近になってMonacaにてCordovaのバージョンを9.0.0から10.0.0にアップグレードしました。
その後、今まで実装したアプリの動作確認を行なったところ、端末上部のステータスバー(電波マークや時計など)とアプリ上部にあるツールバーが重なるようなレイアウトになりました。

当該事象は以前ノッチ(上部のディスプレイが欠けた部分)が付けられたiPhoneXシリーズでも発生したと記憶しており、
その際は以下のOnsen UIサポートを適用して回避しており、今回Cordova10にアップグレードしてもiPhoneXについては起きていません。
https://onsen.io/v2/guide/iphonex.html#

そこでOnsen UIのリリース履歴を確認したところ、現在利用しているバージョン2.10.8ではons.platform.isIPhoneX()がiPhone12シリーズが未対応であり、2.11.2にバージョンアップすると解消されるとのことでしたので、Onsen UIのバージョンアップを実施しました。
https://github.com/OnsenUI/OnsenUI/pull/2811/files

Onsen UIのバージョンアップ自体はnpmで問題なく完了しましたが、
その後monaca previewで起動したところ、以下のエラーメッセージが発生しました。

Error:Cannot find module 'postcss-base64'

シンプルに見つからない上記モジュールをインストールすると解消されましたが、
再度monaca previewで確認すると同じように以下３つのモジュールが見つからない旨のエラーメッセージが発生したので、
同様にインストールを行いました。

Error:Cannot find module 'postcss-preset-env'
Error:Cannot find module 'postcss-nested'
Error:Cannot find module 'postcss-reporter'

合計4つインストールしたところ、最後に以下のようなエラーメッセージが発生しました。

Error:true is not a PostCSS Plugin

ネットで検索したところ、autoprefixerやpostcssのバージョンを調整すると解消されるとの情報がございましたが、
自身の環境を見ると、既に調整後のバージョンがインストールされていたため、実質解消に至りませんでした。

参考URL
https://github.com/vercel/next.js/issues/17236
https://github.com/webpack-contrib/postcss-loader/issues/482

どなたか、解決の糸口となるような情報をお持ちの方がいらっしゃれば、是非とも共有をよろしくお願いいたします。

補足情報

上記事象が発生した際のpackage.jsonは以下のようになっております。
なお、cordova-plugin-customurlschemeのURL_SCHEMEの定義については念のため伏せさせていただきますことご了承ください。

{
"name": "onsenui-v2-vue-minimum",
"version": "4.0.7",
"description": "",
"scripts": {
"build": "webpack --mode production",
"lint": "eslint 'src//*.{js,vue}'",
"lint:fix": "eslint --fix 'src//*.{js,vue}'",
"dev": "webpack-serve --open",
"monaca:debug": "npm run watch",
"monaca:preview": "npm run dev & npm run watch",
"monaca:transpile": "npm run build",
"test": "jest",
"watch": "webpack --watch --mode production",
"doc:gen": "rm -rf website && npx vuese gen",
"doc:serve": "vuese serve --open",
"doc": "npm run doc:gen && npm run doc:serve"
},
"dependencies": {
"@vue/cli-service": "^3.12.1",
"autoprefixer": "^9.8.6",
"axios": "^0.19.2",
"cordova-custom-config": "5.1.0",
"cordova-plugin-camera": "5.0.1",
"cordova-plugin-customurlscheme": "",
"cordova-plugin-email-composer": "",
"cordova-plugin-inappbrowser": "5.0.0",
"cordova-plugin-splashscreen": "6.0.0",
"cordova-plugin-vibration": "3.1.1",
"cordova-plugin-whitelist": "1.3.4",
"json-loader": "^0.5.7",
"monaca-plugin-monaca-core": "3.3.1",
"ncmb": "github:NCMBMania/ncmb_js#master",
"ncmb-push-monaca-plugin": "3.0.11",
"onsenui": "^2.11.2",
"postcss": "^8.3.0",
"postcss-base64": "^0.7.1",
"postcss-nested": "^5.0.5",
"postcss-preset-env": "^6.7.0",
"postcss-reporter": "^7.0.2",
"vee-validate": "^3.3.8",
"vue": "^2.6.10",
"vue-onsenui": "^2.6.2",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-eslint": "^4.5.9",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/test-utils": "^1.1.2",
"@vuese/cli": "^2.14.3",
"babel-core": "^6.26.3",
"babel-jest": "^26.6.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"cordova": "^10.0.0",
"css-loader": "^1.0.0",
"cssnano": "^4.0.2",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.4.1",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jest": "^26.6.3",
"jest-localstorage-mock": "^2.4.6",
"jest-websocket-mock": "^2.2.0",
"mini-css-extract-plugin": "^0.4.1",
"mock-socket": "^9.0.3",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.6",
"postcss-url": "^7.3.2",
"prettier": "^2.1.1",
"progress-bar-webpack-plugin": "^1.11.0",
"style-loader": "^0.21.0",
"vue-jest": "^3.0.7",
"vue-loader": "^15.2.4",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.16.1",
"webpack-cli": "^3.0.8",
"webpack-serve": "^2.0.2",
"yargs": "^12.0.1"
},
"cordova": {
"plugins": {
"cordova-custom-config": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {},
"monaca-plugin-monaca-core": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-camera": {},
"cordova-plugin-customurlscheme": {
"URL_SCHEME": ""
},
"cordova-plugin-email-composer": {},
"cordova-plugin-vibration": {},
"ncmb-push-monaca-plugin": {}
}
}
}

Comments

[FKM]

package.jsonの中身の提示してもらってもいいですか？

[hydrangea12]

ご返信ありがとうございます。
package.jsonの内容を質問に追記いたしました。
よろしくお願いいたします。

[FKM]

postcss-nested@4.2.3
にダウングレードしてもだめでしょうか。

[hydrangea12]

ご回答ありがとうございます。
記載の通り、ダウングレードしたところ、エラーメッセージが以下のように変わりました。
Error: [object Object] is not a PostCSS plugin
全くの無知で恐縮ですが、postcss系のプラグイン同士のバージョンの組み合わせが良くない感じなのでしょうか？

[FKM]

Error:Cannot find module 'postcss-preset-env'
Error:Cannot find module 'postcss-nested'
Error:Cannot find module 'postcss-reporter'

ここに表示されたpostcssは順番に入れたのでしょうか？それとも一斉に入れたのでしょうか？

[hydrangea12]

順番に入れました。
具体的には以下のような流れです。
OnsenUIバージョンアップ & monaca preview
↓
Error:Cannot find module 'postcss-base64'
↓
postcss-base64インストール & monaca preview
↓
Error:Cannot find module 'postcss-preset-env
↓
postcss-preset-envインストール & monaca preview
↓
Error:Cannot find module 'postcss-nested'
↓
postcss-nestedインストール & monaca preview
↓
Error:Cannot find module 'postcss-reporter'
↓
postcss-reporterインストール & monaca preview
↓
Error:true is not a PostCSS Plugin

[FKM]

色々見て回ったのですが、postcssの互換性の問題のようですね。ただ、
aufoprefixerが10以上だと動かないという現象があるために、他のプラグインも
最新版を入れると噛み合わない現象があるようなので、postcss周りを一つ一つ
安定版で入れ直してみたほうがいいのではないかと思います。

[hydrangea12]

承知しました。
一つ一つ入れ直しを試してみたいと思います。
色々と見ていただきありがとうございます。

Answer 1

時間が経っているので解決済みかもしれませんが。。。
全く同様の現象となり、最終的に以下で解決しました。

main.jsで読み込んでいたcssのパスを変更。

require('onsenui/css-components-src/src/onsen-css-components.css')
require('onsenui/css/onsenui.css')

↓

require('onsenui/css/onsen-css-components.css');
require('onsenui/css/onsenui.css');

※結局postcss関連のパッケージは初期のままです。