Uncaught TypeError: Cannot read property 'top' of undefined　の該当エラー箇所がわからない

##　現状
ローカルでは出なかったエラーが本番環境で出てきました。

私が今作成している個人アプリはLINEのようなチャット形式の機能を作成しています。その際にメッセージを飛ばすと下にスクロールするように作成しているのですが調べてみるとどうやらその機能が悪影響を与えているとのこと。

しかし、ローカルで動くjsが本番では動かないということは他にも原因がありそうなのですがそれがわかりません。

##　問題

js
1message.js
2
3$(document).on('turbolinks:load', function(){
4  function buildHTML(message) {
5    let img = message.user_image ? `${ message.user_image }` : "/images/log/bctalk.png";
6    let content = message.content ? `${ message.content }` : "";
7    let id = $('.current_user_name').val();
8
9    function leftright(){if (id==message.user_id) {
10      return  right = "right";
11    } else {
12      return  left = "left";
13    }} 
14    let html = `<div class="message" data-message-id=` + message.id + `>` +
15                  `<div class="${leftright()}">
16                    <div class="${leftright()}__message">
17                      <div img src="${img}"></div>
18                      
19                      <span class="${leftright()}__message__content">
20                          ${content}
21                        </span>
22                      </div>
23                      <div class="${leftright()}__title">
24                        <div class="${leftright()}__title__name">`
25                          + message.user_name +
26                        `</div>
27                        <div class="${leftright()}__title__date">
28                          ${message.date}
29                        </div>
30                      </div>
31                    </div>
32                  </div>
33                  <br>`
34return html;
35  }
36
37
38  $('#new_message').on('submit', function(e){
39   
40    e.preventDefault();
41    var message = new FormData(this); //フォームに入力した値を取得しています。
42    var url = (window.location.href) + '/messages';
43    $.ajax({  
44      url: url,
45      type: 'POST',
46      data: message,
47      dataType: 'json',
48      processData: false,
49      contentType: false
50    })
51    .done(function(data){
52      var html = buildHTML(data);
53      $('.messages').append(html);
54      $('#message_content').val(''); //input内のメッセージを消しています。
55      
56      function scrollBottom(){
57        var target = $('.message').last();
58        var position = target.offset().top + $('.messages').scrollTop();
59        $('.messages').animate({
60          scrollTop: position
61        }, 300, 'swing');
62      }
63      scrollBottom();
64    })
65    .fail(function(){
66      alert('エラーが発生したためメッセージは送信できませんでした。');
67    })
68    .always(function(){
69      $('.input__submit').prop('disabled', false);//ここで解除している
70    })
71  })
72});

こちらは動的カテゴリーボックスのためのjs

$(function(){
  $(document).on('turbolinks:load', ()=> {
    // 画像用のinputを生成する関数
    const buildFileField = (num)=> {
      const html = `<div data-index="${num}" class="js-file_group">
                      <label class='label'>
                      <i class='fa fa-image icon'></i>
                        <input class="js-file" type="file"
                        name="post[images_attributes][${num}][src]"
                        id="product_images_attributes_${num}_src">
                      </label>
                      <br>
                      <div class="js-remove">削除</div>
                    </div>`;
      return html;
    }
    // プレビュー用のimgタグを生成する関数
    const buildImg = (index, url)=> {
      const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
      return html;
    }
  
    // file_fieldのnameに動的なindexをつける為の配列
    let fileIndex = [1,2,3,4,5,6,7,8,9,10];
    // 既に使われているindexを除外
    lastIndex = $('.js-file_group:last').data('index');
    fileIndex.splice(0, lastIndex);
  
    $('.hidden-destroy').hide();
  
    $('#image-box').on('change', '.js-file', function(e) {
      const targetIndex = $(this).parent().parent().data('index');
      console.log(targetIndex)
      // ファイルのブラウザ上でのURLを取得する
      const file = e.target.files[0];
      const blobUrl = window.URL.createObjectURL(file);
  
      // 該当indexを持つimgがあれば取得して変数imgに入れる(画像変更の処理)
      if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
        img.setAttribute('src', blobUrl);
      } else {  // 新規画像追加の処理
        $('#previews').append(buildImg(targetIndex, blobUrl));
        // fileIndexの先頭の数字を使ってinputを作る
        //ここに制限を記述する。
        $('#image-box').append(buildFileField(fileIndex[0]));
        fileIndex.shift();
        // 末尾の数に1足した数を追加する
        fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
      }
    });
  
    $('#image-box').on('click', '.js-remove', function() {
      const targetIndex = $(this).parent().data('index');
      // 該当indexを振られているチェックボックスを取得する
      const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
      // もしチェックボックスが存在すればチェックを入れる
      if (hiddenCheck) hiddenCheck.prop('checked', true);
  
      $(this).parent().remove();
      $(`img[data-index="${targetIndex}"]`).remove();
  
      // 画像入力欄が0個にならないようにしておく
      if ($('.js-file').length == 0) $('#image-box').append(buildFileField(fileIndex[0]));
    });
  });
}

やったこと

awsがおかしいのかと思いインスタンスの再作成と再起動。
message.jsのスクロールfunctionの移動。

を行いましたが変化はありませんでした。

####　追記
message.jsを呼び出しているファイルです。

    .messages
      -if @messages
        -@messages.each do |message|
          .message{"data-message-id": "#{message.id}"} 
            -if message.user.id == current_user.id
              .right
                .right__message  
                  %p.right__message__content
                    =safe_join(message.content.split("\n"),tag(:br))
                  
                .right__title
                  .right__title__date
                    = message.created_at.strftime("%Y年%m月%d日 %H時%M分")
            -else 
              .left
                .left__message
                  
                  =image_tag asset_path(message.user.image)
                  %span.left__message__content
                    =safe_join(message.content.split("\n"),tag(:br))
                .left__title
                  -if message.user
                    .left__title__name
                      = message.user.nickname
                    .left__title__date
                      = message.created_at.strftime("%Y年%m月%d日 %H時%M分")
          %br/

    .contents__footer
      = form_for [@group, @message] do |f|
        .input
          = f.text_area :content, placeholder: "type a message",class: "input__text" ,required: true
          = f.label :submit do
            %i.fas.fa-paper-plane.icon 
            = f.submit class: "input__submit" ,id:'message_submit'

こちらのsubmitでイベントを発火させています。

また動的カテゴリーボックスの方は新規登録画面で使用しおり、本番環境では動きません。

registration/new

.form
    = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
      = render "devise/shared/error_messages", resource: resource ,class: 'error'
      .form__field
        ニックネーム
        %br/
        = f.text_field :nickname, autofocus: true, autocomplete: "nickname",required: true,class:'input'
      .form__field
        = f.label :email
        %br/
        = f.email_field :email, autocomplete: "email",required: true,class:'input'
      .form__field
        = f.label :password
        - if @minimum_password_length
          %em
            (#{@minimum_password_length} 以上)
        %br/
        = f.password_field :password, autocomplete: "new-password" ,required: true,class:'input'
      .form__field
        = f.label :password_confirmation
        %br/
        = f.password_field :password_confirmation, autocomplete: "new-password" ,required: true,class:'input'
      #InId.form__field
        業界
        %br/
        = f.collection_select :industry_id, Industry.all.where(ancestry: nil).limit(14), :id, :name,{prompt: "選択してください"}, name: '',id: "Industry-form",selected:true,required:true
      #OcId.form__field
        職種
        %br/
        = f.collection_select :occupation_id, Occupation.all.where(ancestry: nil).limit(15), :id, :name,{prompt: "選択してください"}, name: '',id: "Occupation-form",selected:true,required:true
      .actions
        = f.submit "save",class:'save'