Rails 7 Importmap Bootstrap

Question

So, I've set up my rails 7 application by doing the following.

rails new .

To add bootstrap I've implemented it with importmap (no webpacker) as following

./bin/importmap pin bootstrap

which loaded these lines (I added the preload: true)

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

then on my application.js, I added

import "bootstrap"
import "@popperjs/core"

and I was able to use the toast element by doing as follow

 # toast_controller.js
import { Controller } from "@hotwired/stimulus"
import * as bootstrap from 'bootstrap'

// Connects to data-controller="toast"
export default class extends Controller {
  connect() {
    const toast = new bootstrap.Toast(this.element, {
      delay: 5000,
      animation: true,
      autohide: true
    })
    toast.show()
  }
}

and it was working well, But I started facing issues with bootstrap when trying to use the tooltip on my menu

# layout_controller.js
import { Controller } from "@hotwired/stimulus"
import * as bootstrap from 'bootstrap'

// Connects to data-controller="toast"
export default class extends Controller {
  connect() {
    [].slice.call(document.querySelectorAll('[data-bs-togle-secondary="tooltip"]'))
      .map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl, {placement: "right"})
      })
  }
}

the reason for it is because popperjs uses process.env.NODE_ENV which doesn't exist since I didn't set up webpacker

so I had to do something ugly on my application layout and add it like this

<script>
  const process = {}
  process.env = {}
  process.env.NODE_ENV = "<%= Rails.env %>"
</script>

Is there a better approach/fix for this kind of issue?

score 3 · Answer 1 · answered Apr 11 '22 at 06:32

At the moment of writing this 11/04/2022 there is not a clear solution for now and your mentioned approach with defining in const process in tag works, one issue with that is that with importmaps+turbolink approach it will rise "Uncaught SyntaxError: redeclaration of const process".

Probably for now it's best to just follow this thread https://github.com/rails/importmap-rails/issues/65 as this issue is mentioned in the comments there. One of the quick fixes mentioned there is similar to yours: https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960. With a combined solution of yours and the one in the comments, it seems that this works best for now and there is no redeclaration error.

<script>window.process = { env: { NODE_ENV: "#{Rails.env}" } }</script>

If the solution is introduced for this issue either on importmaps or popperjs side, then please update this comment or introduce a new answer.

Rails 7 Importmap Bootstrap

1 Answers1