<p>I was able to figure out the problem. It seems that splitting the javascript into packs and using a <code>javascript_pack_tag</code> on the view where you need the javascript is not the way to go according to <a href="https://stackoverflow.com/questions/63542339/rails-6-webpacker-modal-is-not-a-function-importing-dynamic-packs">this answer</a> and a couple others I found. Instead, I added a hidden element based on the value of the <code>visited_research_topics</code> attribute of <code>current_user</code>, then used jQuery to check for the presence this hidden element before running the Javascript. I still don't like this because now the Javascript that I need on one page is unnecessarily included on all pages, but at least it is working properly.</p>
<h2 id="my-working-code-esin">My Working Code</h2>
<p>app/views/research_topics/index.html.haml</p>
<pre><code>- if !current_user.visited_research_topics
  .d-none#showInfoModal
%h1.mx-auto.text-center.mt-3= &quot;Research Topics&quot;
.container-md.mx-auto.p-0
  %button.mb-3.fs-5.btn.btn-primary{data: { bs: { toggle: &quot;modal&quot;, target: &quot;#addTopicModal&quot; } } }= &quot;Add Topic&quot;
  .modal#addTopicModal{ tabindex: &quot;-1&quot;, aria: { labelledby: &quot;topicModalLabel&quot;, hidden: &quot;true&quot; } }
    .modal-dialog
      .modal-content
        .modal-header
          %h5.modal-title#topicModalLabel= &quot;New Topic&quot;
          %button.btn-close{ type: &quot;button&quot;, data: { bs: { dismiss: &quot;modal&quot; } }, aria: { label: &quot;Close&quot; } }
        .modal-body
          = form_for ResearchTopic.new do |f|
            .mb-3
              = f.label :title, class: &quot;form-label&quot;
              = f.text_field :title, class: &quot;form-control mb-3&quot;
              = f.label :search_terms, &quot;Search Terms (add up to 5)&quot;, class: &quot;form-label&quot;
              - 5.times do |n|
                = f.text_field :search_terms, value: &quot;&quot;,  id: &quot;searchTerm#{n}&quot;, name: &quot;research_topic[search_terms][]&quot;, class: &quot;form-control mb-2&quot;
              = f.submit &quot;Add&quot;, class: &quot;btn btn-primary&quot;
  - current_user.research_topics.each.with_index do |topic, topic_number|
    .container.mb-3.px-0.py-3.border-top.border-dark.border-3
      .modal{id: &quot;topic-#{topic_number}-SearchTermModal&quot;, tabindex: &quot;-1&quot;, aria: { labelledby: &quot;searchTermModalLabel&quot;, hidden: &quot;true&quot; } }
        .modal-dialog
          .modal-content
            .modal-header
              %h5.modal-title#searchTermModalLabel= &quot;New Search Term&quot;
              %button.btn-close{ data: { bs: { dismiss: &quot;modal&quot; } }, aria: { label: &quot;Close&quot; } }
            .modal-body
              = form_for SearchTerm.new do |f|
                .mb-3
                  = f.label :term, &quot;New Term For #{topic.title}&quot;, class: &quot;form-label&quot; 
                  = f.text_field :term, class: &quot;form-control mb-3&quot;
                  = f.hidden_field :research_topic_id, value: topic.id
                  = f.submit &quot;Add&quot;, class: &quot;btn btn-primary&quot;
      %h2= topic.title
      .row
        .col-auto
          %h4= &quot;Search Terms:&quot;
        .col-9 
          .row.gy-2
            - topic.search_terms.each do |term|
              .col-auto
                = form_for term, method: :delete  do |f|
                  %p.fs-5.text-dark
                    = term.term
                    %button.btn-close(type=&quot;submit&quot; aria-label=&quot;Close&quot;)
            .col-auto
              %button.btn.btn-primary{ data: { bs: { toggle: &quot;modal&quot;, target: &quot;#topic-#{topic_number}-SearchTermModal&quot; } } }= &quot;Add Term&quot;
      - if topic.research_articles.length == 0
        %h4.p-3.my-3.bg-secondary= &quot;There were no articles found for your search.&quot;
      - else
        .accordion.my-3.bg-light{ id: &quot;topic-#{topic_number}-articlesAccordion&quot; }
          .accordion-item
            %h2.accordion-header{ id: &quot;topic-#{topic_number}-new&quot; }
              %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-newArticlesCollapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-newArticlesCollapse&quot; } }
                = &quot;New&quot;
                %span.badge.bg-primary.ms-3= topic.research_articles.where(status: &quot;new&quot;).length 
                - if topic.new_today_count &gt; 0
                  %span.ms-3.text-success= &quot;#{topic.new_today_count} New Today&quot;
            .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-newArticlesCollapse&quot; , aria: { labelledby: &quot;topic-#{topic_number}-new&quot; } }
              .accordion-body
                .accordion{ id: &quot;topic-#{topic_number}-newAccordion&quot; }
                  - if topic.research_articles.where(status: &quot;new&quot;).length == 0
                    %p= &quot;It looks like there aren't any articles you haven't seen before. Try adding a new search term for more results.&quot;
                  - topic.research_articles.where(status: &quot;new&quot;).each.with_index do |article, article_number|
                    .accordion-item
                      %h2.accordion-header{ id: &quot;topic-#{topic_number}-newArticle-#{article_number}&quot; }
                        %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-newArticle-#{article_number}-collapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-newArticle-#{article_number}-collapse&quot; } }
                          .container
                            .row= article.title
                            .row.mt-3.text-muted= article.article_published
                      .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-newArticle-#{article_number}-collapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-newArticle-#{article_number}&quot; } }
                        .accordion-body
                          = render 'shared/research_article', article: article
          .accordion-item
            %h2.accordion-header{ id: &quot;topic-#{topic_number}-saved&quot; }
              %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-savedArticlesCollapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-savedArticlesCollapse&quot; } }
                = &quot;Saved&quot;
                %span.badge.bg-primary.ms-3= topic.research_articles.where(status: &quot;saved&quot;).length 
            .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-savedArticlesCollapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-saved&quot; } }
              .accordion-body
                .accordion.bg-light{ id: &quot;topic-#{topic_number}-savedAccordion&quot; }
                  - topic.research_articles.where(status: &quot;saved&quot;).each.with_index do |article, article_number|
                    .accordion-item
                      %h2.accordion-header{ id: &quot;topic-#{topic_number}-savedArticle-#{article_number}&quot; }
                        %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-savedArticle-#{article_number}-collapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-savedArticle-#{article_number}-collapse&quot; } }
                          .container
                            .row= article.title
                            .row.mt-3.text-muted= article.article_published
                      .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-savedArticle-#{article_number}-collapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-savedArticle-#{article_number}&quot; } }
                        .accordion-body
                          = render 'shared/research_article', article: article
          .accordion-item
            %h2.accordion-header{ id: &quot;topic-#{topic_number}-read&quot; }
              %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-readArticlesCollapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-readArticlesCollapse&quot; } }
                = &quot;Read&quot;
                %span.ms-3.badge.bg-primary= topic.research_articles.where(status: &quot;read&quot;).length  
            .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-readArticlesCollapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-read&quot; } }
              .accordion-body
                .accordion{ id: &quot;topic-#{topic_number}-readAccordion&quot; }
                  - topic.research_articles.where(status: &quot;read&quot;).each.with_index do |article, article_number|
                    .accordion-item
                      %h2.accordion-header{ id: &quot;topic-#{topic_number}-readArticle-#{article_number}&quot; }
                        %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-readArticle-#{article_number}-collapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-readArticle-#{article_number}-collapse&quot; } }
                          .container
                            .row= article.title
                            .row.mt-3.text-muted= article.article_published
                      .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-readArticle-#{article_number}-collapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-readArticle-#{article_number}&quot; } }
                        .accordion-body
                          = render 'shared/research_article', article: article
      %button.btn.btn-dark{type: &quot;button&quot;, data: { bs: { toggle: &quot;modal&quot;, target: &quot;#deleteTopic-#{topic_number}&quot; } } }= &quot;Delete Topic&quot;
      .modal{ id: &quot;deleteTopic-#{topic_number}&quot;, tabindex: &quot;-1&quot; }
        .modal-dialog
          .modal-content
            .modal-body
              %p= &quot;Are you sure you want to delete the topic &lt;em&gt;#{topic.title}&lt;/em&gt;? This cannot be undone.&quot;.html_safe
              .row
                .col-2
                  = form_for topic, method: :delete do |f|
                    = f.submit &quot;Yes&quot;, class: &quot;btn btn-dark&quot; 
                .col-2
                  %button.btn.btn-dark{ data: { bs: { dismiss: &quot;modal&quot; } } }= &quot;No&quot;
.modal#infoModal{ tabindex: &quot;-1&quot;, aria: { labelledby: &quot;infoModalLabel&quot;, hidden: &quot;false&quot; } }
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        .modal-title.h4.text-dark#infoModalLabel= &quot;About Research Topics Page&quot;
        %button.btn-close{ type: &quot;button&quot;, data: { bs: { dismiss: &quot;modal&quot; } }, aria: { label: &quot;Close&quot; } }
      .modal-body
        %p.fs-5.mb-3.text-dark= &quot;- On this page you can add as many research topics as you like.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- Every 24 hours, the arXiv API is queried with the search terms you provide.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- arXiv contains nearly 2 million scholarly articles in various academic fields.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- The 10 most recent articles will appear in the 'new' section of each topic every day.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- The 'new' section is automatically refreshed each time you add or delete a search term.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- You can save the articles for later, mark them as read or not interested, or take notes about them.&quot;        
        %p.fs-5.mb-3.text-dark= &quot;- If you see older articles appearing in the 'new' section, then you have read or saved all of the newest articles and the algorithm is finding older ones so there is always something you haven't seen before.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- Click the &lt;i class='bi bi-question-circle mx-2 h4'&gt;&lt;/i&gt; to see this message again.&quot;.html_safe
</code></pre>
<p>app/javascript/packs/application.js</p>
<pre><code>// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from &quot;@rails/ujs&quot;
import Turbolinks from &quot;turbolinks&quot;
import * as ActiveStorage from &quot;@rails/activestorage&quot;
import &quot;channels&quot;
import '../stylesheets/application'
require(&quot;bootstrap&quot;)
require('../info_modal/info_modal');
import 'bootstrap-icons/font/bootstrap-icons.css'
Rails.start()
Turbolinks.start()
ActiveStorage.start()
</code></pre>
<p>app/javascript/info_modal/info_modal.js</p>
<pre><code>$(document).on(&quot;turbolinks:load&quot;, function() {
  if ($('#showInfoModal').length &gt; 0) {
    new bootstrap.Modal($('#infoModal')).show();
  };
});
</code></pre>
<p>config/webpack/environment.js</p>
<pre><code>const webpack = require('webpack');
const { environment } = require('@rails/webpacker')
environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default'],
        bootstrap: 'bootstrap'
    })
)
module.exports = environment
</code></pre>
Bootstrap Dropdown Stops Working With javascript_pack_tag Included on Rails
<h2 id="programs-and-versions-yd4a">Programs and Versions</h2>
<p>Hello, I am working on a personal Rails project using Rails 6.1.3.2, Bootstrap 5.0.1, Ruby 2.6.5, Haml 5.2.1, and Webpack 4.46.0.</p>
<h2 id="the-goal-5lxw">The goal</h2>
<p>I am trying to make a modal show on page load the first time the user visits a particular page, and afterwards they have to click a button to see it again.</p>
<h2 id="the-approach-algn">The Approach</h2>
<p>I am using a <a href="https://getbootstrap.com/docs/5.0/components/modal/#show" rel="nofollow noreferrer">Javascript function</a> provided by Bootstrap to show the modal, which requires me to make 'bootstrap' available as a variable with Webpack, in addition to requiring it in the application.js file. I have an attribute on the User model that tracks if they have visited the page, and an if statement which loads the <code>javascript_pack_tag</code> if the attribute is false.</p>
<h2 id="the-problem-w338">The Problem</h2>
<p>The function works, but after the modal is closed, the dropdown link doesn't open and the accordions will open but not close. If I remove the <code>require(&quot;bootstrap&quot;)</code> from application.js, everything works the first time, but when the page is reloaded all Javascript stops working.</p>
<h2 id="my-suspicions-and-previous-efforts-zz0f">My Suspicions and Previous Efforts</h2>
<p>I suspect that when the <code>javascript_pack_tag</code> is included, Bootstrap is being loaded twice and causing unusual problems. I tried using an import statement in the research_topics.js file, but the same problem occurred. I have tried removing <code>require(&quot;bootstrap&quot;)</code> from application.js, which works on the initial visit to the page, but once the page is reloaded none of the Bootstrap components work anymore. I learned on Rails version 4, so I'm new to Webpack and may be overlooking something simple. Any help would be greatly appreciated.</p>
<h2 id="my-code-02j2">My Code</h2>
<p>The full project is available <a href="https://github.com/Calvin0125/info_compass" rel="nofollow noreferrer">here</a>. Just run bundle install, rails db:migrate and rails db:seed to get it set up.</p>
<p>app/views/research_topics/index.html.haml</p>
<pre><code>= javascript_pack_tag 'research_topics_index', 'data-turbolinks-track': 'reload' if !current_user.visited_research_topics
%h1.mx-auto.text-center.mt-3= &quot;Research Topics&quot;
.container-md.mx-auto.p-0
  %button.mb-3.fs-5.btn.btn-primary{data: { bs: { toggle: &quot;modal&quot;, target: &quot;#addTopicModal&quot; } } }= &quot;Add Topic&quot;
  .modal#addTopicModal{ tabindex: &quot;-1&quot;, aria: { labelledby: &quot;topicModalLabel&quot;, hidden: &quot;true&quot; } }
    .modal-dialog
      .modal-content
        .modal-header
          %h5.modal-title#topicModalLabel= &quot;New Topic&quot;
          %button.btn-close{ type: &quot;button&quot;, data: { bs: { dismiss: &quot;modal&quot; } }, aria: { label: &quot;Close&quot; } }
        .modal-body
          = form_for ResearchTopic.new do |f|
            .mb-3
              = f.label :title, class: &quot;form-label&quot;
              = f.text_field :title, class: &quot;form-control mb-3&quot;
              = f.label :search_terms, &quot;Search Terms (add up to 5)&quot;, class: &quot;form-label&quot;
              - 5.times do |n|
                = f.text_field :search_terms, value: &quot;&quot;,  id: &quot;searchTerm#{n}&quot;, name: &quot;research_topic[search_terms][]&quot;, class: &quot;form-control mb-2&quot;
              = f.submit &quot;Add&quot;, class: &quot;btn btn-primary&quot;
  - current_user.research_topics.each.with_index do |topic, topic_number|
    .container.mb-3.px-0.py-3.border-top.border-dark.border-3
      .modal{id: &quot;topic-#{topic_number}-SearchTermModal&quot;, tabindex: &quot;-1&quot;, aria: { labelledby: &quot;searchTermModalLabel&quot;, hidden: &quot;true&quot; } }
        .modal-dialog
          .modal-content
            .modal-header
              %h5.modal-title#searchTermModalLabel= &quot;New Search Term&quot;
              %button.btn-close{ data: { bs: { dismiss: &quot;modal&quot; } }, aria: { label: &quot;Close&quot; } }
            .modal-body
              = form_for SearchTerm.new do |f|
                .mb-3
                  = f.label :term, &quot;New Term For #{topic.title}&quot;, class: &quot;form-label&quot; 
                  = f.text_field :term, class: &quot;form-control mb-3&quot;
                  = f.hidden_field :research_topic_id, value: topic.id
                  = f.submit &quot;Add&quot;, class: &quot;btn btn-primary&quot;
      %h2= topic.title
      .row
        .col-auto
          %h4= &quot;Search Terms:&quot;
        .col-9 
          .row.gy-2
            - topic.search_terms.each do |term|
              .col-auto
                = form_for term, method: :delete  do |f|
                  %p.fs-5.text-dark
                    = term.term
                    %button.btn-close(type=&quot;submit&quot; aria-label=&quot;Close&quot;)
            .col-auto
              %button.btn.btn-primary{ data: { bs: { toggle: &quot;modal&quot;, target: &quot;#topic-#{topic_number}-SearchTermModal&quot; } } }= &quot;Add Term&quot;
      - if topic.research_articles.length == 0
        %h4.p-3.my-3.bg-secondary= &quot;There were no articles found for your search.&quot;
      - else
        .accordion.my-3.bg-light{ id: &quot;topic-#{topic_number}-articlesAccordion&quot; }
          .accordion-item
            %h2.accordion-header{ id: &quot;topic-#{topic_number}-new&quot; }
              %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-newArticlesCollapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-newArticlesCollapse&quot; } }
                = &quot;New&quot;
                %span.badge.bg-primary.ms-3= topic.research_articles.where(status: &quot;new&quot;).length 
                - if topic.new_today_count &gt; 0
                  %span.ms-3.text-success= &quot;#{topic.new_today_count} New Today&quot;
            .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-newArticlesCollapse&quot; , aria: { labelledby: &quot;topic-#{topic_number}-new&quot; } }
              .accordion-body
                .accordion{ id: &quot;topic-#{topic_number}-newAccordion&quot; }
                  - if topic.research_articles.where(status: &quot;new&quot;).length == 0
                    %p= &quot;It looks like there aren't any articles you haven't seen before. Try adding a new search term for more results.&quot;
                  - topic.research_articles.where(status: &quot;new&quot;).each.with_index do |article, article_number|
                    .accordion-item
                      %h2.accordion-header{ id: &quot;topic-#{topic_number}-newArticle-#{article_number}&quot; }
                        %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-newArticle-#{article_number}-collapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-newArticle-#{article_number}-collapse&quot; } }
                          .container
                            .row= article.title
                            .row.mt-3.text-muted= article.article_published
                      .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-newArticle-#{article_number}-collapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-newArticle-#{article_number}&quot; } }
                        .accordion-body
                          = render 'shared/research_article', article: article
          .accordion-item
            %h2.accordion-header{ id: &quot;topic-#{topic_number}-saved&quot; }
              %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-savedArticlesCollapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-savedArticlesCollapse&quot; } }
                = &quot;Saved&quot;
                %span.badge.bg-primary.ms-3= topic.research_articles.where(status: &quot;saved&quot;).length 
            .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-savedArticlesCollapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-saved&quot; } }
              .accordion-body
                .accordion.bg-light{ id: &quot;topic-#{topic_number}-savedAccordion&quot; }
                  - topic.research_articles.where(status: &quot;saved&quot;).each.with_index do |article, article_number|
                    .accordion-item
                      %h2.accordion-header{ id: &quot;topic-#{topic_number}-savedArticle-#{article_number}&quot; }
                        %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-savedArticle-#{article_number}-collapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-savedArticle-#{article_number}-collapse&quot; } }
                          .container
                            .row= article.title
                            .row.mt-3.text-muted= article.article_published
                      .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-savedArticle-#{article_number}-collapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-savedArticle-#{article_number}&quot; } }
                        .accordion-body
                          = render 'shared/research_article', article: article
          .accordion-item
            %h2.accordion-header{ id: &quot;topic-#{topic_number}-read&quot; }
              %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-readArticlesCollapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-readArticlesCollapse&quot; } }
                = &quot;Read&quot;
                %span.ms-3.badge.bg-primary= topic.research_articles.where(status: &quot;read&quot;).length  
            .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-readArticlesCollapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-read&quot; } }
              .accordion-body
                .accordion{ id: &quot;topic-#{topic_number}-readAccordion&quot; }
                  - topic.research_articles.where(status: &quot;read&quot;).each.with_index do |article, article_number|
                    .accordion-item
                      %h2.accordion-header{ id: &quot;topic-#{topic_number}-readArticle-#{article_number}&quot; }
                        %button.accordion-button.collapsed{ type: &quot;button&quot;, data: { bs: { toggle: &quot;collapse&quot;, target: &quot;#topic-#{topic_number}-readArticle-#{article_number}-collapse&quot; } }, aria: { expanded: &quot;false&quot;, controls: &quot;topic-#{topic_number}-readArticle-#{article_number}-collapse&quot; } }
                          .container
                            .row= article.title
                            .row.mt-3.text-muted= article.article_published
                      .collapse.accordion-collapse{ id: &quot;topic-#{topic_number}-readArticle-#{article_number}-collapse&quot;, aria: { labelledby: &quot;topic-#{topic_number}-readArticle-#{article_number}&quot; } }
                        .accordion-body
                          = render 'shared/research_article', article: article
      %button.btn.btn-dark{type: &quot;button&quot;, data: { bs: { toggle: &quot;modal&quot;, target: &quot;#deleteTopic-#{topic_number}&quot; } } }= &quot;Delete Topic&quot;
      .modal{ id: &quot;deleteTopic-#{topic_number}&quot;, tabindex: &quot;-1&quot; }
        .modal-dialog
          .modal-content
            .modal-body
              %p= &quot;Are you sure you want to delete the topic &lt;em&gt;#{topic.title}&lt;/em&gt;? This cannot be undone.&quot;.html_safe
              .row
                .col-2
                  = form_for topic, method: :delete do |f|
                    = f.submit &quot;Yes&quot;, class: &quot;btn btn-dark&quot; 
                .col-2
                  %button.btn.btn-dark{ data: { bs: { dismiss: &quot;modal&quot; } } }= &quot;No&quot;
.modal#infoModal{ tabindex: &quot;-1&quot;, aria: { labelledby: &quot;infoModalLabel&quot;, hidden: &quot;false&quot; } }
  .modal-dialog.modal-lg
    .modal-content
      .modal-header
        .modal-title.h4.text-dark#infoModalLabel= &quot;About Research Topics Page&quot;
        %button.btn-close{ type: &quot;button&quot;, data: { bs: { dismiss: &quot;modal&quot; } }, aria: { label: &quot;Close&quot; } }
      .modal-body
        %p.fs-5.mb-3.text-dark= &quot;- On this page you can add as many research topics as you like.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- Every 24 hours, the arXiv API is queried with the search terms you provide.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- arXiv contains nearly 2 million scholarly articles in various academic fields.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- The 10 most recent articles will appear in the 'new' section of each topic every day.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- The 'new' section is automatically refreshed each time you add or delete a search term.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- You can save the articles for later, mark them as read or not interested, or take notes about them.&quot;        
        %p.fs-5.mb-3.text-dark= &quot;- If you see older articles appearing in the 'new' section, then you have read or saved all of the newest articles and the algorithm is finding older ones so there is always something you haven't seen before.&quot;
        %p.fs-5.mb-3.text-dark= &quot;- Click the &lt;i class='bi bi-question-circle mx-2 h4'&gt;&lt;/i&gt; to see this message again.&quot;.html_safe
</code></pre>
<p>app/javascript/packs/application.js</p>
<pre><code>// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from &quot;@rails/ujs&quot;
import Turbolinks from &quot;turbolinks&quot;
import * as ActiveStorage from &quot;@rails/activestorage&quot;
import &quot;channels&quot;
import '../stylesheets/application'
require(&quot;bootstrap&quot;)
import 'bootstrap-icons/font/bootstrap-icons.css'
Rails.start()
Turbolinks.start()
ActiveStorage.start()
</code></pre>
<p>app/javascript/packs/research_topics_index.js</p>
<pre><code>$(window).on('load', function() {
  new bootstrap.Modal($('#infoModal')).show();
});
</code></pre>
<p>config/webpack/environment.js</p>
<pre><code>const webpack = require('webpack');
const { environment } = require('@rails/webpacker')
environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default'],
    bootstrap: 'bootstrap'
    })
)
module.exports = environment
</code></pre>