質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

2回答

1679閲覧

Nuxt.jsアプリをgenerateするとデータバインディングが切れる

pen_ari

総合スコア50

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

1クリップ

投稿2020/08/07 08:56

編集2020/08/08 06:26

前提・実現したいこと

Nuxt.js+vuetifyでプロジェクトを作成し、作成後の状態でgenerateしたものをfirebaseにdeployしましたが、
ボタンを押したときの波うつアニメーションなどが適用されなくなり、また、
v-modelを使用しての簡単なデータバインディング等も反映されなくなってしまいました
以下確認したことです

  • yarn devよる確認時では正常に動作していたため、ソース側の問題ではなさそう
  • distに作成されるindex.htmlを直接参照しても同様の問題が発生したためfirebaseへのデプロイそのものに問題は無さそう

環境及びプロジェクト作成過程

macでもwin10でも同様の問題が発生しました

bash

1$ firebase --version 28.6.0 3 4$ yarn --version 51.22.4

bash

1$ yarn create nuxt-app hoge 2yarn create v1.22.4 3[1/4] ???? Resolving packages... 4[2/4] ???? Fetching packages... 5[3/4] ???? Linking dependencies... 6[4/4] ???? Building fresh packages... 7success Installed "create-nuxt-app@3.2.0" with binaries: 8 - create-nuxt-app 9 10create-nuxt-app v3.2.0 11✨ Generating Nuxt.js project in hoge 12? Project name: hoge 13? Programming language: JavaScript 14? Package manager: Yarn 15? UI framework: Vuetify.js 16? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection) 17? Linting tools: ESLint, Prettier 18? Testing framework: None 19? Rendering mode: Universal (SSR / SSG) 20? Deployment target: Server (Node.js hosting) 21? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

bash

1$ cd hoge/ 2 3$ firebase init 4 5You're about to initialize a Firebase project in this directory: 6 7 /hoge 8 9? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites 10 11=== Project Setup 12 13First, let's associate this project directory with a Firebase project. 14You can create multiple project aliases by running firebase use --add, 15but for now we'll just set up a default project. 16 17? Please select an option: Use an existing project 18? Select a default Firebase project for this directory: hoge (hoge) 19i Using project hoge (hoge) 20 21=== Hosting Setup 22 23Your public directory is the folder (relative to your project directory) that 24will contain Hosting assets to be uploaded with firebase deploy. If you 25have a build process for your assets, use your build's output directory. 26 27? What do you want to use as your public directory? dist 28? Configure as a single-page app (rewrite all urls to /index.html)? No 29✔ Wrote dist/404.html 30✔ Wrote dist/index.html 31 32i Writing configuration info to firebase.json... 33i Writing project information to .firebaserc... 34 35✔ Firebase initialization complete! 36

bash

1$ yarn generate 2$ firebase deploy

ホスティングされたURLを確認するとヘッダーの各ボタンは存在しておりますが、クリックしても何も反応がありませんでした

関係しているかわかりませんが、デバッガーコンソールのエラーは以下です

https://hoge.web.app/_nuxt/node_modules/commons.hoge.js net::ERR_ABORTED 404

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kai0310

2020/08/09 00:30

yarn generateを実行した際にエラー等のログは出力されなかったでしょうか? あれば質問本文を修正し追記していただければ幸いです。
pen_ari

2020/08/09 05:18

修正依頼ありがとうございます エラーは特に何も発生しませんでした
guest

回答2

0

ベストアンサー

まったく同様の現象が起こり nuxt.js の issues を確認しました。

v2.14.1 での不具合のようです。v2.14.2 で修正されるとのことです。

Version 2.14.1 generates common.js inside of dist/_nuxt/node_modules #7901
https://github.com/nuxt/nuxt.js/issues/7901

投稿2020/08/15 05:02

編集2020/08/15 05:03
machine_machine

総合スコア162

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pen_ari

2020/08/15 05:13 編集

とても有益な情報ありがとうございます!
guest

0

解決しました
firbase.jsonのignoreにnode_modulesを無視するようデフォルトで設定されており、
nuxt generate時にdist/_nuxt/node_modules配下に作成されるjsファイルがデプロイされていないことが原因でした
質問本文最終行のエラーメッセージがそれによるものです

私の環境でのみ起こっていることなのか、他の方でも発生するのかわかりませんが、node_modulesを無視する設定を削除したところ、無事動作するようになりました。

yarn generateによってdist/_nuxtにnode_modulesが作成されるのがおかしいのか、、
firebase initによって作成されるfirebase.jsonでnode_modulesを無視するように設定されるのがおかしいのかは不明です。。
もし試していただけた方がいらっしゃれば、私との差異など、ご意見いただきたいので、しばらく質問は開いておきます

投稿2020/08/10 00:48

編集2020/08/10 00:50
pen_ari

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問