ReferenceError: Cannot access 'App' before initializationエラーが出現し、本番環境ではjsが動かない

お世話になっております。

前提

ruby 2.6.5
Rails 5.2.4
Docker
docker-compose

GitHubのURLを記載しておきます。
https://github.com/nanakobaby/myapp

現状

ローカル上では動作していたjsが、本番環境(AWS)では動作しません。
本番環境で出現しているエラーは以下になります。

ReferenceError: Cannot access 'App' before initialization

エラーが出現している行
myapp/public/assets/application-61cf….

App.cable=ActionCable.createConsumer()}.call(this),App.loadPlugins=((e,t,n)=>{async function r(){if(t)fo......

[試したこと]
・上記のエラーが出現する原因として、以下の記事を参考に調査しました。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init

初期化前に語彙変数にアクセスしました。これはブロックステートメント内で、定義される前にlet か const 宣言にアクセスすると発生します。

このことから、エラー該当ファイル内でApp.cableが再宣言されている箇所を探したのですが、見当たりませんでした。

・本番環境でJSが動作しない要因がないか確認

application.jsにライブラリの読み込みで関連しているものは2つないか => なし
JavaScriptの読み込み順を変える

application.html.erb

before

<head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag "/assets/font/inter/inter.min.css", media: "all", id: "font-css" %>
    <%= stylesheet_link_tag "/assets/css/style.min.css", media: "all", id: "main-css"  %>
    <%= stylesheet_link_tag "/assets/css/sidebar-gray.min.css", media: "all", id: "theme-css"  %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://js.pay.jp/" type="text/javascript"></script>
  </head>

after

  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://js.pay.jp/" type="text/javascript"></script>
    <%= stylesheet_link_tag "/assets/font/inter/inter.min.css", media: "all", id: "font-css" %>
    <%= stylesheet_link_tag "/assets/css/style.min.css", media: "all", id: "main-css"  %>
    <%= stylesheet_link_tag "/assets/css/sidebar-gray.min.css", media: "all", id: "theme-css"  %>
  </head>

関連するコード

application.js

//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require activestorage
//= require turbolinks
//= require rails-ujs
//= require_tree .

cable.js

// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
//
//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);

pay.js

document.addEventListener(
  "DOMContentLoaded", e => {
    if (document.getElementById("token_submit") != null) { 
      Payjp.setPublicKey("pk_test_a33b7ef2b25aa51a5df58de1");
      let btn = document.getElementById("token_submit"); 
      btn.addEventListener("click", e => {
        e.preventDefault();
        let card = {
          number: document.getElementById("card_number").value,
          cvc: document.getElementById("cvc").value,
          exp_month: document.getElementById("exp_month").value,
          exp_year: document.getElementById("exp_year").value
        }; 
        Payjp.createToken(card, (status, response) => {
          if (status === 200) {
            $("#card_number").removeAttr("name");
            $("#cvc").removeAttr("name");
            $("#exp_month").removeAttr("name");
            $("#exp_year").removeAttr("name"); 
            $("#card_token").append(
              $('<input type="hidden" name="payjp-token">').val(response.id)
            ); 
            document.inputForm.submit();
            alert("登録が完了しました"); 
          } else {
            alert("カード情報が正しくありません。");
          }
        });
      });
    }
  },
  false
);

他に対処法はございますでしょうか？
この問題に関して、アドバイスいただけると幸いです。宜しくお願い致します????‍♀️

no1knows

2020/09/03 09:20

> 実行コードより後に定義した引数を使用した場合や、スコープの外から呼び出した時に表示されるエラーです。 https://qiita.com/tetsu-upstr/items/c15fd0408244db16ed44 とのことなので、jsファイル内を質問に追記いただくと回答がつきやすいかもしれません。

mofuko

2020/09/03 09:33

なるほど！ありがとうございます????‍♀️追記致します。

no1knows

2020/09/03 10:49

application.jsなどjs関連のソースのことです。

mofuko

2020/09/03 10:56

教えていただきありがとうございます????

退会済みユーザー

2020/09/03 11:08

`require_tree .`で読み込まれるファイル（application.jsと同じディレクトリにあるjsファイル）の内容も記載できますか？

mofuko

2020/09/03 11:16

了解致しました！追記致します。

mofuko

2020/09/03 11:22 編集

> `require_tree .`で読み込まれるファイル（application.jsと同じディレクトリにあるjsファイル）の内容も記載できますか？ありがとうございます。関連コードにjsの内容を追記しました！ GitHubのURLも前提の部分に追記しておきました！

行動規範の内容に同意します

回答1件

ベストアンサー

GitHubからcloneしてみましたが、いろいろエラーが出てサービスを立ち上げられず、以下はコードを見た感じの予想ですが、

どうもapp/assets/javascripts/js/script.jsでグローバル領域にconst Appの変数宣言されているために、ご質問のようなエラーが出るようです。以下のコードをブラウザの開発者ツールなどで実行すると同じようなエラーになることがわかると思います。

javascript
1(function () {
2  App.cable = "hoge";
3}).call(this);
4
5const App = {};

ローカルでエラーに遭遇しなかったのはJavaScriptがバンドルされた際にたまたまapp/assets/javascripts/js/script.jsがcable.jsより先に読み込まれたのではないでしょうか。

require_treeは読み込み順を制御できないようなので、試しに以下のようにcable.jsを修正して動作を確認してみてください。

javascript
1// Action Cable provides the framework to deal with WebSockets in Rails.
2// You can generate new channels where WebSocket features live using the `rails generate channel` command.
3//
4//= require action_cable
5//= require_self
6//= require_tree ./channels
7
8(function() {
9  this.App || (this.App = {});
10
11  this.App.cable = ActionCable.createConsumer();
12
13}).call(this);

2020.09.04 追記

cable.jsを以下に修正し、動作確認してみましたが、エラーの内容に変化ありませんでした????

...

app/assets/javascripts/js/script.js

で宣言されているconst App を var App に変更して、動作を確認してみたところ、本番環境でもjsが動作するようになりました。

var Appに変更すると、var宣言以前のAppは上書きされてしまうので、以下のような既存のAppを取り込むような修正を行う必要があります。

diff
1diff --git a/app/assets/javascripts/js/script.js b/app/assets/javascripts/js/script.js
2index d1fdc33..b05dc68 100644
3--- a/app/assets/javascripts/js/script.js
4+++ b/app/assets/javascripts/js/script.js
5@@ -1,4 +1,4 @@
6-var App = (() => {
7+var App = ((App) => {
8   'use strict'
9
10   // Debounced resize event (width only). [ref: https://paulbrowne.xyz/debouncing]
11@@ -562,6 +562,7 @@ var App = (() => {
12   }
13
14   return {
15+    ...App,
16     resize: callback => resize(callback),
17     xs: () => xs(),
18     sm: () => sm(),
19@@ -602,7 +603,7 @@ var App = (() => {
20     bootstrapSelect: () => bootstrapSelect(),
21     select2: () => select2(),
22   }
23-})()
24+})(this.App || (this.App = {}))
25
26 $(() => {
27   $('[data-toggle="popover"]').popover()

投稿2020/09/03 12:43

編集2020/09/04 09:50

退会済みユーザー

総合スコア0

mofuko

2020/09/03 13:38

詳しく調べていただき、本当にありがとうございます！???? cable.jsを修正し、確認してみます！

mofuko

2020/09/03 22:40 編集

cable.jsを以下に修正し、動作確認してみましたが、エラーの内容に変化ありませんでした???? ``` //= require action_cable //= require_self //= require_tree ./channels (function() { this.App || (this.App = {}); this.App.cable = ActionCable.createConsumer(); }).call(this); ```

mofuko

2020/09/03 23:47

`app/assets/javascripts/js/script.js` で宣言されているconst App を var App に変更して、動作を確認してみたところ、本番環境でもjsが動作するようになりました。この方法以外で解決策はないか引き続き調べていきたいと思います。

退会済みユーザー

2020/09/04 09:38

`/app/assets/javascripts/js/ajax.js`でも`App.`を使用しているので今度はそちらに引っかかってしまったのかと思われます。`var App`に変更してしまうとその宣言以前に定義されていた`App`オブジェクトが上書きされてしまうかもしれません。

mofuko

2020/09/04 09:56

なるほど..！ありがとうございます。そちらも考慮し、修正してみます！

行動規範の内容に同意します