I can not get the Bootstrap Modal to work using the new esbuild JSBundler / CSSBundler set up in Rails, the button just does nothing with no errors (using example as test).
Using the GoRails Jumpstart template most of the set up was already done and bootstrap styling seems to be there and Stimulus is working but Bootstrap modals do not.
As I understand it we are now to use JSBundling Rails for JS in Rails (not webpack) so I am using this along with CSSBundler and ESBuild.
See below relevant files:
app/javascript/application.js
// Entry point for the build script in your package.json
import "./controllers"
import "@hotwired/turbo-rails"
import * as bootstrap from "bootstrap"
import './channels/**/*_channel.js'
import "./src/**/*"
app/javascript/packs/application.js
// 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.
window.Rails = require("@rails/ujs")
require("@hotwired/turbo-rails")
require("@rails/activestorage").start()
require("channels")
//require("trix")
//require("@rails/actiontext")
require("local-time").start()
// Start Rails UJS
Rails.start()
// Stimulus
import "controllers"
// Bootstrap
import 'bootstrap'
document.addEventListener("turbo:load", () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
})
package.json
{
"name": "app",
"private": "true",
"dependencies": {
"@hotwired/stimulus": "^3.0.1",
"@hotwired/turbo-rails": "^7.0.1",
"@popperjs/core": "^2.10.2",
"@rails/request.js": "^0.0.5",
"bootstrap": "^5.1.3",
"esbuild": "^0.14.2",
"esbuild-rails": "^1.0.3",
"expose-loader": "^3.1.0",
"local-time": "^2.1.0",
"sass": "^1.43.4"
},
"scripts": {
"build": "node esbuild.config.js",
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
}
gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.1'
gem 'dotenv-rails', groups: [:development, :test]
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.4', '>= 6.1.4.1'
# Use postgresql as the database for Active Record
gem 'pg', '~> 1.1'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'simple_form'
gem 'cloudinary', '~> 1.16.0'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 4.1.0'
# Display performance information such as SQL time and flame graphs for each request in your browser.
# Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
gem 'rack-mini-profiler', '~> 2.0'
gem 'listen', '~> 3.3'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'cssbundling-rails'
gem 'devise', '~> 4.8', '>= 4.8.0'
gem 'friendly_id', '~> 5.4'
gem 'hotwire-rails'
gem 'image_processing'
gem 'jsbundling-rails'
gem 'madmin'
gem 'name_of_person', '~> 1.1'
gem 'noticed', '~> 1.4'
gem 'omniauth-facebook', '~> 8.0'
gem 'omniauth-github', '~> 2.0'
gem 'omniauth-twitter', '~> 1.4'
gem 'pretender', '~> 0.3.4'
gem 'pundit', '~> 2.1'
gem 'sidekiq', '~> 6.2'
gem 'sitemap_generator', '~> 6.1'
gem 'whenever', require: false
gem 'responders', github: 'heartcombo/responders', branch: 'main'
gem "esbuild-rails", "~> 0.1.4"
Happy to share any more thats needed.
Any help appreciated!