タイトル通り、ionic + Vue.js を使って実装した際に最初につまづいてしまったので備忘録がてら記事にしました。
背景としては体調不良でしばらく安静にしてましたが、体調も少しずつよくなってきたのでリハビリも兼ねてVue.jsを色々と触ったりしてました。
youtubeなどでも、ionicに関する動画も上がっておりどんなものか興味は以前からありました。
少し前にVue.js + Vuetifyを使ってみてとても良かったけど、Vue.js(vuex) + ionic で扱ってみたかったのもあったのでお試しで作った時のつまづいたポイントを紹介したと思います。
package.jcon内の設定環境
"@ionic/core": "^4.6.0",
"@ionic/vue": "0.0.4",
"core-js": "^2.6.5",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
Vue環境を新しく立ち上げionicをnpmでインストール
- ひとまずは新しくvue-cliからプロジェクトを作成し
npm install ionic
を実行
- 実際ionicで使われるコンポーネントなどを設定しました。
しかしchrome画面が真っ白。。。
-
npm run serveしても以下のようなエラーがchromeのコンソールから出る
Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at addIcons (chunk-ea2b3dce.js?d602:13)
at appInitialize (ionic-vue.esm.js?481b:279)
at Object.install (ionic-vue.esm.js?481b:687)
at Function.Vue.use (vue.runtime.esm.js?2b0e:5101)
at eval (main.js?56d7:12)
at Module../src/main.js (app.js:10193)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
at Object.1 (app.js:10267)
- しかもターミナルからも以下のようなwarningも出ていることに気づく
warning in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'
え。。。ないの？
というより、chromeの画面が真っ白。。。。。泣
- どういうわけか、ionicをインストールするだけではダメだったっぽい
エラーの調査
上記のエラーをもとに確認したところこんなissueがgithub上に上がっていたので、下記のurlの会話を見つつどんな解決方法があるか見てみました。
- 参考になったissue : https://github.com/ionic-team/ionic/issues/18640
- あれこれ追記するなどの話もあったのですが、辿っていくとpackage.jsonに追記すればOKとのことだったので以下のコマンドを入力
npm install ionicons@4.5.9-1
-
--save-devすればいいみたいですが、この辺は気にせず実行 - すると表示されました！！！（感動！）
トライしたから見つかったエラー
- 「ま、お試しでw」という感覚値でやってみたので、エラーは出るだろうという前提で、何もしないよりはやってみようという精神でやってみました。（トライアンドエラーの精神）
- 個人差はあるかと思いますが、どこかに必ずつまずきポイントはあるかと思いますが、今回の場合は、ionicドキュメントも少なく日本語のページではその辺までカバーされてなかったのでその辺は若干苦労しました。
- 解決方法は英文でしか見つからないこともあるので、その辺は根気よく読んでみるのも一つの引き出しとして持つと世界がもっと広がるかもしれないです。
- （ちょっとだけですが、自身がついた気がしますが、これからもトライアンドエラーの精神で精進します）
初めての投稿なので、日本語的に問題があれば遠慮なくコメントいただきますと励みになります。
またこの記事が皆様のご参考になれれば幸いです。