Почему мои js .erb представления не работают при использовании webpacker в Rails 6 с bootstrap?

Question

Я пытаюсь добавить сом простой Ajax в мое приложение rails. Я использую Bootstrap с веб-пакетом. Мой webpack/environment.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

Мой javascript/packs/application.js выглядит следующим образом

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap'
import 'src/main'
import 'style/main'

Я пытаюсь добавить Ajax для одной из моих моделей в create.js.erb

$("#question-<%= @exam_option.exam_question.id %>-options").append("<%= escape_javascript render 'exam_option', option: @exam_option %>");
$('#add_option_modal').modal('hide');

Когда я пытаюсь добавить один из моих вариантов, я получаю ошибку консоли

ReferenceError: Can't find variable: $

Я искал решение и имею был неудачным.

Что я делаю не так? Спасибо!

Редактировать:

Когда я добавил Bootstrap в свое приложение, я следовал этому руководству . Следуя руководству, я установил bootstrap, jquery и поппер. js с пряжей

yarn add bootstrap jquery popper.js

jQuery, используемый Bootstrap, работает правильно ( такие как всплывающие подсказки). согласно ответу @ mechnicov, я попытался изменить environment.js на

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

, и я добавил require("jquery") выше import 'bootstrap' в свои application.js

, когда я сделал эти изменения, мой код в create.js.erb работает правильно, но из-за этого Bootstrap работает неправильно и выдает такие ошибки, как TypeError: ... $('[data-toggle="tooltip"]').tooltip() undefined.

Редактировать 2

Согласно Приняв ответ, я изменил свой application.js на:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
window.jQuery = window.$ = require('jquery')
import 'bootstrap'
import 'src/main'
import 'style/main'

Кажется, все работает правильно, но я не уверен, почему мне нужно добавить его таким образом? Разве Webpack не должен делать это из моего environment.js файла? Если кто-то может объяснить это, пожалуйста, сделайте.

Answer 1

Можете ли вы попробовать ниже код: -

# javascript/packs/application.js

window.jQuery = window.$ = require('jquery')

ИЛИ

# javascript/packs/application.js

require("jquery")
window.jQuery = $;
window.$ = $;

Я также столкнулся с той же проблемой, но выше код работал для меня на этом время

Надеюсь, это вам тоже поможет. :)

Answer 2

Вы не загружаете JQuery.

Добавьте его к своим модулям узла:

$ yarn add jquery

Напишите правильный путь к 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',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

Добавьте строку перед bootstrap в javascript/packs/application.js:

require("jquery")

И не забудьте о javascript_pack_tag 'application' в главном виде компоновки.

Надеюсь, это поможет вам.