Rails6 Bootstrap javascriptが読み込めない modal is not a function

Question

###Uncaught TypeError: $(...).modal is not a function

【destroy.js.haml】

$("#Modal1").modal('show');

Uncaught TypeError: $(...).modal is not a function

functionが見つからないとエラーが出てしまいます。

###CDNで読み込んでみる

【application.html.haml】

%script{crossorigin: "anonymous", integrity: "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", src: "https://code.jquery.com/jquery-3.3.1.slim.min.js"}
%script{crossorigin: "anonymous", integrity: "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", src: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"}
%script{crossorigin: "anonymous", integrity: "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM", src: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"}

正常に動作します。

Webpackerで読み込みたい

application.html.hamlで定義したCDNは一旦コメントアウトしてwebpackを通して読み込めるようにbootstrapの設定を行います。

【application.html.haml】

= javascript_pack_tag 'application'
= stylesheet_pack_tag 'application'

【app/javascript/packs/application.js】

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import 'bootstrap'
import '../src/application.scss'

【/config/webpack/environment.js】

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
// jQueryとBootstapのJSを使えるように
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
module.exports = environment

【app/javascript/src/application.scss】

@import '~bootstrap/scss/bootstrap';

yarn add jquery bootstrap popper.jsでBootstrapとpopper.jsとjqueryはインストールしてあります。

設定がおかしい部分などございましたらご教示ただけますと幸いです。

Ruby 2.7.1
Rails 6.0.3.2
dockerコンテナ(nginx mysql rails)

Answer 1

下記を参考にしていただくとよいかと思います。

https://teratail.com/questions/280958