Stack Level Too deep error for google maps

Question

I've been getting this stack level too deep error and I'm unsure where it is coming from. Here is the error:

I'm using the google maps javascript api to display items. Here is the model:

 class Item < ApplicationRecord
  belongs_to :user
  has_one_attached :photo

  validates :price, presence: true, if: :available_for_rent?
  #address validations
  validates :street, presence: true
  validates :city, presence: true
  validates :state, presence: true
  validates :zip, presence: true

  scope :rentable, -> { where(available_for_rent: true) }

  #google maps
  geocoded_by :address
  after_validation :geocode

  def address
    [street, city, zip, state].compact.join(", ")
  end

  #validate size of photo uploads
  validate :photo_validation
  def photo_validation
    if photo.attached?
      if photo.blob.byte_size > 3000000
        photo.purge
        errors[:base] << 'The file uploaded was too big. Jubal Talents only allows photo uploads under 3 MB.'
      elsif !photo.blob.content_type.starts_with?('image/')
        photo.purge
        errors[:base] << 'Wrong format. Please ensure file is jpg or png.'
      end
    end
  end
  
end

Here is the html where the error is triggered:

  <div class="column">
      <%= tag.div nil, id:'map', data: {items: @items.to_json(methods: [:address])}%>
      <div class="notification">
        <p class="title is-6">Addresses are not exact. You must contact the owner to recieve a pickup address.</p>
      </div>
  </div>
</div>

and here is the javascript:

document.addEventListener("turbolinks:load", function() {
    var map = new GMaps({
        div: '#map',
        lat: 38.5816,
        lng: -121.4944
      });
      window.map = map;

      var items = JSON.parse(document.querySelector("#map").dataset.items);
      window.items = items;

      var bounds = new google.maps.LatLngBounds();

      items.forEach(function(item) {
        if (item.latitude && item.longitude) {
            var marker = map.addMarker({
                lat: (item.latitude - Math.random()*.1),
                lng: (item.longitude - Math.random()*.1),
                title: item.address,
                infoWindow: {
                    content: `<p><a href="/items/${item.id}">${item.name}</a></p>`
                }
            })
        bounds.extend(marker.position);
        }
      });
    map.fitBounds(bounds);

});

I'm fairly certain that the error is coming from the model but I'm still somewhat new to everything. Any help would be much appriciated! :)

Answer 1

It turns out that the "to_json" method was causing the problem.

The root cause of this problem in my case was having a field with the same name in my model (column in the table) as the attachment, which is not needed, since Active Storage uses separate tables. And when to_json is called on such a model object, it causes Stack level too deep error. After removing the column from the database, the problem goes away.

This post really helped my problem