Monaca メモ

Monacaで久しぶりにプロジェクトを作成し Monaca デバッガを立ち上げたところ、以下のエラーが発生しました。

ググッてもヒットしなかったので私の使い方や環境が悪いだけかもしれませんが、プロジェクトの作成から解決するまでをメモっておきます。

開発環境

  • localkit v2.3.0 / Monaca IDE
  • Monaca Debugger v6.1.1
  • PC: Windows10

プロジェクト作成

以下の設定でプロジェクトを作成しました。

カテゴリ Onsen UI
テンプレート Onsen UI V2 JS Minimum

Monaca デバッガ立ち上げ

Monaca デバッガを立ち上げると、以下の2つのエラーがログに出力されました。

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 デバッガで再実行。

エラーが消えました!!!

… が、よくみると 謎メッセージが2個?

ググったところ Shadow DOM を使っていなければ気にしなくていい的なことが書いているように見えた(英語わかりません)ので無視することに。

でも、なんで2個?

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 を読み込んでる!
だから同じ内容のメッセージが2個表示されたんですね。

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 文はなかったと思うんです。今後また仕様が変わるかもしれませんが現状報告ということで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA