Невозможно вызвать Bootstrap4 $ ('. Carousel'). Carousel в Ruby на Rails 6, используя Webpacker

Question

Я использую Ruby на Rails 6 и webpacker. Попытка добавить слайд карусели выглядит так: this (Bootstrap 4 Card Slider)
Однако, когда я нажал кнопку, чтобы показать следующий (или предыдущий) слайд, в консоли всплыло Uncaught TypeError: $(...).carousel is not a function , Даже когда я пишу скрипт $('.carousel').carousel прямо в консоли, возникает та же ошибка.
Я видел, что загрузка JQuery несколько раз вызывает похожую ошибку, но я не знаю, что я это сделал.
Ниже приведены мои коды , Любое предложение полезно.

app / views / home_page / test. html .erb

<%= javascript_pack_tag "carousel" %>

<section class="container p-t-3">
    <div class="row">
        <div class="col-lg-12">
            <h1>Bootstrap 4 Card Slider</h1>
        </div>
    </div>
</section>
<section class="carousel slide" data-ride="carousel" id="postsCarousel">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-md-right lead">
                <a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
                <a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
            </div>
        </div>
    </div>
    <div class="container p-t-0 m-t-2 carousel-inner">
        <div class="row row-equal carousel-item active m-t-0">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-img-top card-img-top-250">
                        <img class="img-fluid" src="http://i.imgur.com/EW5FgJM.png" alt="Carousel 1">
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-img-top card-img-top-250">
                        <img class="img-fluid" src="http://i.imgur.com/Hw7sWGU.png" alt="Carousel 2">
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-img-top card-img-top-250">
                        <img class="img-fluid" src="http://i.imgur.com/g27lAMl.png" alt="Carousel 3">
                    </div>

                </div>
            </div>
        </div>
        <div class="row row-equal carousel-item m-t-0">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-img-top card-img-top-250">
                        <img class="img-fluid" src="//visualhunt.com/photos/l/1/office-student-work-study.jpg" alt="Carousel 4">
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-img-top card-img-top-250">
                        <img class="img-fluid" src="//visualhunt.com/photos/l/1/working-woman-technology-computer.jpg" alt="Carousel 5">
                    </div>

                </div>
            </div>
            <div class="col-md-3 fadeIn wow">
                <div class="card">
                    <div class="card-img-top card-img-top-250">
                        <img class="img-fluid" src="//visualhunt.com/photos/l/1/people-office-team-collaboration.jpg" alt="Carousel 6">
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

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.s css

@import '~bootstrap/scss/bootstrap';

пакет. 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"
  }
}

Answer 1

В моем окружении есть следующее. js:

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

, что заставляет jquery работать с веб-упаковщиком.

Затем в вашем приложении.s css

@import '~bootstrap';

Следующий тест. html .rb в некотором беспорядке. Это урезанная версия, которая работает без карточек и других стилей:

<section class="container">
  <h1>Bootstrap 4 Card Slider</h1>
</section>
<section class="container">

  <a class="btn btn-lg" href="#carouselExample" role="button" data-slide="prev">
    <span> &laquo; </span>
  </a>
  <a class="btn btn-lg" href="#carouselExample" role="button" data-slide="next">
    <span> &raquo; </span>
  </a>

  <div id="carouselExample" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="http://i.imgur.com/EW5FgJM.png" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="http://i.imgur.com/Hw7sWGU.png" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="http://i.imgur.com/g27lAMl.png" alt="Third slide">
      </div>
    </div>
  </div>
</section>

Используются атрибуты данных, поэтому вам не нужно ничего из javascript в карусели. js. Сделайте так, чтобы это работало, а затем добавьте свои карты и стиль обратно.