Rails- Bootstrap dropdown is not working in Rails project

Question

I develop a web project and I want to use bootstrap dropdown but dropdown is not working. I create a new project and tried to use dropdown and it worked. It seems to my settings are wrong but I don't know which one is wrong.

application.js

import "bootstrap"
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require ("font_awesome5")
require ("toastr")
require ("jquery")
require("popper")
require("trix")
require("@rails/actiontext")

package.json

{
  "name": "coolby",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/actiontext": "^6.0.3-4",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "channels": "^0.0.4",
    "popper": "^1.0.1",
    "popper.js": "^1.16.1",
    "toastr": "^2.1.4",
    "trix": "^1.2.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "bootstrap": "4.5.3",
    "jquery": "^3.5.1",
    "webpack": "^5.12.2",
    "webpack-dev-server": "^3.11.1"
  }
}

enviroment.js

const {environment} = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({

    $: 'jquery',

    jQuery: 'jquery',

    Popper: ['popper.js', 'default']

}))

module.exports = environment

application.scss

 *= require bootstrap
 *= require_tree .
 *= require_self
 *= require trix
 */
@import 'font_awesome5_webfont';
@import "toastr";
@import "./actiontext.scss";

question from:https://stackoverflow.com/questions/65647593/rails-bootstrap-dropdown-is-not-working-in-rails-project

Answer 1

Waitting for answers