How to use a Bootstrap modal in the Show view

Question

Good night!

I would like a help to put a modal to work in the Show view of my project because I’m breaking my head to make it work, if someone can give an attention I am extremely grateful guys.

My products_controller.Rb:

  def show
    @product = Product.find(params[id])
    respond_to do |format|
      format.html
      format.js
    end
  end

app/views/product/index.html.erb:

<div class="container" style="margin-top: 20px;">
  <div class="row" style="margin-top: 20px;">
    <% @products.each do |product| %>
      <div class="card text-center text-white bg-primary ml-3 mb-3" style="width: 12rem;">
        <div class="card-header">
          <%= product.category&.name %>
        </div>
        <div class="card-body bg-light">
        <%= image_tag product.category.image_url, class:"card-img-top" %>
          <%= link_to product_path(product), {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#showProduct', class:"btn btn-secondary btn-sm" }  do  %>
            <i class="far fa-eye" style="margin-right: 5px;"></i><%= t('links.See Details') %>
          <% end %>
        </div>
        <div class="card-footer">
          <% if user_signed_in? %>
            <%= link_to t('links.Edit'), edit_product_path(product), class:"btn btn-secondary btn-sm" %>
            <%= link_to t('links.Destroy'), product, method: :delete, data: { confirm: t('messages.Are you sure?') }, class:"btn btn-danger btn-sm" %>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>


<%= render 'new_product_form', product: Product.new %>
<%= render 'show_product', product: @product %>
<%= render 'categories/new_category_form', category: Category.new %>

app/views/products/show.js.erb:

$("#showProduct").html("<%= j render 'showProduct', product: @product %>");
$('#showProduct').modal('show');

app/views/products/show.html.erb:

<%= render 'show_product', product: @product %>

app/views/products/_show_product.html.erb:

<div class="modal fade bd-example-modal-xl" id="showProduct" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título provisório</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col">
              <p id="notice"><%= notice %></p>

              <p>
                <strong>Name:</strong>
                <%= @product.name %>
              </p>

              <p>
                <strong>Category: %></strong>
                <%= @product.category.name %>
              </p>

              <div>
                <% if @product.regular_photo.attached? %>
                  <%= image_tag @product.regular_photo.variant(resize_to_limit: [250, 250]).processed,
                      width: 250,
                      heigth: 250
                  %>
                <% end %>
              </div>

            </div>
          </div>
        </div>
      </div>
            <%= link_to t('links.edit'), edit_product_path(@product) %> |
            <%= link_to t('links.back'), products_path %>

    </div>
  </div>
</div>

The error that returns is: