Rails 6 Bootstrap Modal Won't Appear - ruby-on-rails

Question

After trying to upgrade my rails app from asset pipeline to the webpacker my modals will no longer pop up. I do not get any errors on initial load of the page or when I click on the modal button. However, if I run $('#edit').modal('show') in the console twice I get these errors:
$('#edit').modal('show')
bootstrap.esm.js:187 Uncaught TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element".
at bootstrap.esm.js:187
at Array.forEach (<anonymous>)
at typeCheckConfig (bootstrap.esm.js:181)
at Backdrop._getConfig (bootstrap.esm.js:2856)
at new Backdrop (bootstrap.esm.js:2792)
at Modal._initializeBackDrop (bootstrap.esm.js:3117)
at new Modal (bootstrap.esm.js:2974)
at HTMLDivElement.<anonymous> (bootstrap.esm.js:3359)
at Function.each (jquery.js:328)
at jQuery.fn.init.each (jquery.js:168)
(anonymous) # bootstrap.esm.js:187
typeCheckConfig # bootstrap.esm.js:181
_getConfig # bootstrap.esm.js:2856
Backdrop # bootstrap.esm.js:2792
_initializeBackDrop # bootstrap.esm.js:3117
Modal # bootstrap.esm.js:2974
(anonymous) # bootstrap.esm.js:3359
each # jquery.js:328
each # jquery.js:168
jQueryInterface # bootstrap.esm.js:3358
(anonymous) # VM58:1
$('#edit').modal('show') ## if I enter this again I get a different error
bootstrap.esm.js:3278 Uncaught TypeError: Cannot read property 'show' of undefined
at Modal._showBackdrop (bootstrap.esm.js:3278)
at Modal.show (bootstrap.esm.js:3030)
at HTMLDivElement.<anonymous> (bootstrap.esm.js:3369)
at Function.each (jquery.js:328)
at jQuery.fn.init.each (jquery.js:168)
at jQuery.fn.init.jQueryInterface [as modal] (bootstrap.esm.js:3358)
at <anonymous>:1:12
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '3.0.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.3', '>= 6.1.3.2'
# 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'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# 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'
# Use jQuery as the JavaScript library
gem 'jquery-rails'
# bootstrap
gem 'bootstrap', '~> 4.5.2'
gem 'stripe', git: 'https://github.com/stripe/stripe-ruby'
# Adds Sendgrid
gem 'sendgrid-ruby'
# Adds Twilio
gem 'twilio-ruby', '~> 5.52.0'
# Adds Datatables
gem 'jquery-datatables'
# Dependency for boostrap datetimepicker
gem 'momentjs-rails', '>= 2.9.0'
# Adds DateTimePicker
gem 'bootstrap3-datetimepicker-rails', '~> 4.15.35'
# Adds input field masking
gem 'jquery_mask_rails', '~> 0.1.0'
# HTTP request gem
gem 'faraday'
# 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
# Debugging tools
gem 'pry'
# Testing framework
gem 'rspec-rails', '~> 5.0.0'
gem 'selenium-webdriver', '~> 3.142', '>= 3.142.7'
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
# Testing frontend integration
gem 'capybara'
# Adds ability to open page during testing
gem 'launchy'
# Testing coverage
gem 'simplecov', require: false
# Disallow API calls during testing
gem 'webmock'
# Make inital API call and save as fixtures
gem 'vcr'
# Generate fixtures for testing
gem 'factory_bot_rails'
gem 'faker'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
app/javascripts/pack/application.rb
// 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 "#rails/ujs"
import * as ActiveStorage from "#rails/activestorage"
import "channels"
import "datatables.net-bs4"
import "#fortawesome/fontawesome-free/css/all"
import "moment"
import "bootstrap"
import "datetimepicker"
import "jquery-mask-plugin"
Rails.start()
ActiveStorage.start()
global.$ = jQuery;
config/webpack/environment.rb
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.Tether': 'tether',
Popper: ['popper.js', 'default'],
ActionCable: 'actioncable',
})
)
module.exports = environment
View
<i class="fas fa-edit"></i>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="Edit" aria-hidden="true" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
Some form stuff
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<%= f.submit "Save", class: "btn btn-primary" %>
</div>
<% end %>
</div>
</div>
</div>
app/assets/stylesheets/application.scss
/* Load Bootstrap Libraries */
#import 'bootstrap';
/* Load Datatables */
#import "datatables";
/* Load Datetime picker */
#import 'bootstrap-datetimepicker';

Answer 1

Ben Trewern was right! I removed all my front-end gems from the Gemfile and added it to yarn and fixed the issue. Thanks.