title: Rails 7 Importmap Bootstrap
body: <p>So, I've set up my rails 7 application by doing the following.</p>
  <pre><code>rails new .
  </code></pre>
  <p>To add bootstrap I've implemented it with importmap (no webpacker) as following</p>
  <pre><code>./bin/importmap pin bootstrap
  </code></pre>
  <p>which loaded these lines (I added the preload: true)</p>
  <pre><code>pin 'bootstrap', to: https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js', preload: true
  pin '@popperjs/core', to: 'https://ga.jspm.io/npm:@popperjs/core@2.11.2/lib/index.js', preload: true
  </code></pre>
  <p>then on my application.js, I added</p>
  <pre><code>import &quot;bootstrap&quot;
  import &quot;@popperjs/core&quot;
  </code></pre>
  <p>and I was able to use the toast element by doing as follow</p>
  <pre><code> # toast_controller.js
  import { Controller } from &quot;@hotwired/stimulus&quot;
  import * as bootstrap from 'bootstrap'
  
  // Connects to data-controller=&quot;toast&quot;
  export default class extends Controller {
    connect() {
      const toast = new bootstrap.Toast(this.element, {
        delay: 5000,
        animation: true,
        autohide: true
      })
      toast.show()
    }
  }
  </code></pre>
  <p>and it was working well, But I started facing issues with bootstrap when trying to use the tooltip on my menu</p>
  <pre><code># layout_controller.js
  import { Controller } from &quot;@hotwired/stimulus&quot;
  import * as bootstrap from 'bootstrap'
  
  // Connects to data-controller=&quot;toast&quot;
  export default class extends Controller {
    connect() {
      [].slice.call(document.querySelectorAll('[data-bs-togle-secondary=&quot;tooltip&quot;]'))
        .map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl, {placement: &quot;right&quot;})
        })
    }
  }
  </code></pre>
  <p>the reason for it is because popperjs uses <code>process.env.NODE_ENV</code> which doesn't exist since I didn't set up webpacker</p>
  <p>so I had to do something ugly on my application layout and add it like this</p>
  <pre><code>&lt;script&gt;
    const process = {}
    process.env = {}
    process.env.NODE_ENV = &quot;&lt;%= Rails.env %&gt;&quot;
  &lt;/script&gt;
  </code></pre>
  <p>Is there a better approach/fix for this kind of issue?</p>