Rails 6 Bootstrap Modal Won't Appear

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

<a href="#edit" data-toggle="modal" data-target="#edit"><i class="fas fa-edit"></i></a>

<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">&times;</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.