I'm using Ruby on Rails 6 and webpacker. Tried to add carousel slide looks like this(Bootstrap 4 Card Slider)
However, when I clicked the button to show the next(or previous) slide, Uncaught TypeError: $(...).carousel is not a function popped up in the console. Even I write a script $('.carousel').carousel directly in the console, same error occurred.
I saw that loading JQuery multiple times causes similar error, but I don't know I did that.
Below are my codes. Any suggestion is helpful.

app/views/home_page/test.html.erb

<%= javascript_pack_tag "carousel" %>  
     
         
             
Bootstrap 4 Card Slider
         
     
 
 
     
         
             
                                               
         
     
     
         
             
                 
                     
                                              
                 
             
             
                 
                     
                                              
                  
             
             
                 
                     
                                              
                  
             
         
         
             
                 
                     
                                              
                  
             
             
                 
                     
                                              
                  
             
             
                 
                     
                                              
                  
             
         
     
 
 

app/javascript/packs/carousel.js

(function($) {     "use strict";      // manual carousel controls     $('.next').click(function(){ $('.carousel').carousel('next');return false; });     $('.prev').click(function(){ $('.carousel').carousel('prev');return false; });  })(jQuery); 

config/webpack/environment.js

const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.prepend(   'Provide',   new webpack.ProvidePlugin({     $: 'jquery/src/jquery',     jQuery: 'jquery/src/jquery',     jquery: 'jquery/src/jquery',     Popper: 'popper.js'   }) ) module.exports = environment 

app/javascript/packs/application.js

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

app/javascript/src/application.scss

@import '~bootstrap/scss/bootstrap'; 

package.json

{   "name": "sample",   "private": true,   "dependencies": {     "@rails/actioncable": "^6.0.0",     "@rails/actiontext": "^6.0.2-1",     "@rails/activestorage": "^6.0.0",     "@rails/ujs": "^6.0.0",     "@rails/webpacker": "4.2.2",     "bootstrap": "4.3.1",     "jquery": "^3.4.1",     "popper.js": "^1.16.1",     "trix": "^1.0.0",     "turbolinks": "^5.2.0"   },   "version": "0.1.0",   "devDependencies": {     "webpack-dev-server": "^3.10.1"   } }