Monacaで久しぶりにプロジェクトを作成し Monaca デバッガを立ち上げたところ、以下のエラーが発生しました。
ググッてもヒットしなかったので私の使い方や環境が悪いだけかもしれませんが、プロジェクトの作成から解決するまでをメモっておきます。
開発環境
- localkit v2.3.0 / Monaca IDE
- Monaca Debugger v6.1.1
- PC: Windows10
プロジェクト作成
以下の設定でプロジェクトを作成しました。
| カテゴリ | Onsen UI |
|---|---|
| テンプレート | Onsen UI V2 JS Minimum |
Monaca デバッガ立ち上げ
Monaca デバッガを立ち上げると、以下の２つのエラーがログに出力されました。
|
Uncaught ReferenceError: Set is not defined www/lib/onsenui/js/onsenui.min.js: 3 |
|
Uncaught ReferenceError: ons is not defined www/index.html: 16 |
なにが悪いのか想像すらつきません。
ちなみに localkit/IDEの Preview ではエラーはでていません。
ファイル構成とバージョン確認
index.html のソースをみてみます。
<script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
lib フォルダ内のファイルを開いてバージョンを確認すると、
| onsenui.min.js | v2.2.4 |
|---|---|
| onsenui.css | v2.2.4 |
| onsen-css-components.css | ？不明 |
次に loader ファイルを開いて中身を確認すると、
| components/loader.js | monaca-cordova-loader のコード |
|---|---|
| monaca-core-utils のコード | |
| components/loader.css | ヘッダのみ |
Onsen UI のリリース情報を調べてみると最新版は v2.3.1。内容をざっと見ても本件と関連するような箇所はわからなかったのですが、v2.2.4 からけっこう更新されてました。
最新版 Onsen UI インストール
ということで、v2.2.4 以降のどこかで修正されていることを祈りつつ Onsen UI の最新版をインストールしてみることにしました。JS/CSSコンポーネントの追加画面で Onsen UI (Monaca Version)を選択し、選択可能なバージョンのなかで最新となる v2.3.0 をインストール。そして、Monaca デバッガで再実行。
エラーが消えました！！！
… が、よくみると 謎メッセージが２個？
ググったところ Shadow DOM を使っていなければ気にしなくていい的なことが書いているように見えた（英語わかりません）ので無視することに。
でも、なんで２個？
index.html 見直し
index.html を見てみると loader ファイルを読み込んでから lib フォルダ内のファイルを読み込んでいます。
そこで、もう一度 loader ファイルを確認してみます。
| components/loader.js | monaca-cordova-loader のコード |
|---|---|
| monaca-core-utils のコード | |
| monaca-onsenui のコード追加 | |
| components/loader.css | onsenui.css と onsen-css-components.css のインポート文追加 |
loader ファイルに Onsen UI の記述が追加されています。バージョンは v2.3.0。
次に lib フォルダ内のファイルを開いてバージョンを確認すると、js ファイル/css ファイル ともに v2.2.4 のまま変わりありません。
ということは loader ファイルで v2.3.0 を読み込んだ後に lib フォルダ内の v2.2.4 を読み込んでる！
だから同じ内容のメッセージが２個表示されたんですね。
index.html 修正
ということで index.html の lib フォルダ内のファイル読み込みをコメントアウトしました。
<script src="components/loader.js"></script> <!-- <script src="lib/onsenui/js/onsenui.min.js"></script> --> <link rel="stylesheet" href="components/loader.css"> <!-- <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> -->
実行した結果は以下のようになりました。
まとめ
JS/CSSコンポーネントの追加画面から追加したファイルは loader ファイルに書き込まれます。Onsen UI を追加（更新）した場合は、index.html に前バージョンのファイルの読み込みを行う script 文が残っているので、これを手動で削除する必要があります。
以前は Onsen UI は最初から loader ファイルに記述されていて、 index.html には Onsen UI を読み込む script 文はなかったと思うんです。今後また仕様が変わるかもしれませんが現状報告ということで。