Web技術速習テキスト の最後、いきなり行きます。
第8章 授業記録アプリ は、氏曰く
本書のまとめとして、Vue.js、Firebase 認証、Firestore、Vuetifyといった要素を組み合わせて、より実践的なアプリを作成してみましょう。
是非お願いします！
実は途中にある章飛ばしてここまで来ています。
大丈夫かな、、、
まあいいか。
どんどん写経します。
App.vue
StudentView.vue
TeacherView.vue
とりあえず、ローカルでnpm run serveして画面が出るところまでは行きました。
では次にFirebaseに接続します。
vueファイルを書き換えます。
実行！
エラー
diffとって差分もなくします。
エラー
？？
念のため、答えのソースをそのままコピーします。
エラー
？？？？
ちょっとエラー内容を見てみましょう。
npm run serve
> class-tracker@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR Failed to compile with 1 error 0:23:57
error in ./src/App.vue?vue&type=script&lang=js&
Module not found: Error: Package path . is not exported from package C:\ｘｘｘ\class-tracker\node_modules\firebase (see exports field in C:\ｘｘｘｘ\class-tracker\node_modules\firebase\package.json)
ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 50:15-34
Module not found: Error: Package path . is not exported from package C:\ｘｘｘｘ\class-tracker\node_modules\firebase (see exports field in C:\ｘｘｘｘ\class-tracker\node_modules\firebase\package.json) @ ./src/App.vue?vue&type=script&lang=js& 1:0-203 1:219-222 1:224-424 1:224-424
@ ./src/App.vue 2:0-55 3:0-50 3:0-50 9:2-8
@ ./src/main.js 6:0-28 12:13-16
webpack compiled with 1 error
これが詰まった。
package.json見てとか言われても困る。（見たけど何が悪いのかわからん）
Module not foundとか言われても、
Package path . is not exported from package の「.」は
何言いたいのっ？って感じ。
結論から申し上げますと、4つの問題がありました。
動かすまでの道のり
Firebaseのバージョンアップの影響
Firebase Javascript SDKが、v8からv9 にアップデートされているようです。
そして本書は恐らくv8
私の環境は npm install --save firebase しているので最新のv9
この差異を吸収するコードを書かないといけませんでした。
const firebase = require("firebase");
↓
import firebase from 'firebase/compat/app';
import "firebase/compat/firestore";
import "firebase/compat/auth";
databaseURLが出ないのを出す
Firebaseから取得する「SDKの設定と構成」のソースコードにdatabaseURLが出ていませんでした。
ちゃんと「Firestore Database」で仮ユーザも登録しており、DBはあるはずなのに。
この件は以下のサイトを参考にさせていただきました。
結論からいうと、「Realtime Database」を作成する
でした。
別に使わないのですが、ただ、作成するだけ。データも登録しません。
（キャプチャ取っておけばよかった、、、）
Vuetifyのバージョンアップの影響
上記をクリアしてもエラーがでます。
[Vuetify] [BREAKING] 'app' has been removed, use '<v-app-bar app>' instead. For more information, see
タグが属性が廃止され、新しい定義に変える必要があります。
【App.vue】
<v-toolbar app>
↓
<v-app-bar app>
まだエラーはなくなりません。
[Vuetify] [BREAKING] 'flat' has been removed, use 'text' instead.
<v-btn flat ～
<v-btn text ～
[Vuetify] [BREAKING] 'box' has been removed, use 'filled' instead. <v-textarea box
<v-textarea box
↓
<v-textarea filled
v-stepperの定義バグ
いままでの修正で、構文的なエラーはなくなったのですが、
生徒でログインしたとき、ヘッダ部分以外何も出ない事象が発生しました。
最初IEで見ていたので
「もしかしたらブラウザによってはサポートされていないのか？」
などと思って、Chromeで見てみても出ない。
そういえば、この部分の動きがよくわかっていなかったのですが、
今はヘッダ部分は見えていて、コンテンツ部分が見えていない状況です。
しかしタグの綴りもあっているし、、、
そもそもネットに置いてある答えを持ってきたので、
「間違っている」部分はありません。
それでも出ないのでいろいろ調べたら、、、、
ありました。
export default {
props: ["students"],
data() {
return {
step: 0,
picker: new Date().toISOString().substr(0, 10),
student: "",
comment: ""
};
},
各ステップを「step」という変数で管理しているのですが
初期値が「0」でした。
しかし、実際のstepperで日付指定の部分から始まる最初のstepは、、、
<v-stepper-step :complete="step > 1"
step="1">日付指定</v-stepper-step>
<v-divider></v-divider>
step="1"
よって、export defaultからのstepは、、、
export default {
props: ["students"],
data() {
return {
step: 1,
picker: new Date().toISOString().substr(0, 10),
student: "",
comment: ""
};
},
step:1,
にすることで、、、
でました！
よかった、、、
まとめ
結構つまりました、、、、
同じエラーが出ている人が思うので、本記事が参考になれば幸いです。
