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

Question

前提・実現したいこと

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

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

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

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

$ firebase --version
8.6.0

$ yarn --version
1.22.4

$ yarn create nuxt-app hoge
yarn create v1.22.4
[1/4] ????  Resolving packages...
[2/4] ????  Fetching packages...
[3/4] ????  Linking dependencies...
[4/4] ????  Building fresh packages...
success Installed "create-nuxt-app@3.2.0" with binaries:
      - create-nuxt-app

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in hoge
? Project name: hoge
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

$ cd hoge/

$ firebase init

You're about to initialize a Firebase project in this directory:

  /hoge

? 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

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: hoge (hoge)
i  Using project hoge (hoge)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote dist/404.html
✔  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

$ yarn generate
$ firebase deploy

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

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

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

Comments

[kai0310]

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

[pen_ari]

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

Answer 1

まったく同様の現象が起こり 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

Comments

[pen_ari]

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

Answer 2

解決しました
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を無視するように設定されるのがおかしいのかは不明です。。
もし試していただけた方がいらっしゃれば、私との差異など、ご意見いただきたいので、しばらく質問は開いておきます