Не могу подключить bootstrap.js через webpacker

Question

Не могу подключить bootstrap.js через webpacker. Что сделано

yarn add bootstrap popper.js jquery

app/javascript/packs/application.js

import "bootstrap"
import "../stylesheets/application"

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',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
}))

module.exports = environment

app/views/layouts/application.html.erb

%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Но bootstrap.js не подгружается. Я хотел использовать modal. Все работает, если я добавлю в views

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Что неправильно делаю с webpack?

Answer 1

Отлично, все это исправляется добавлением в config/webpack/environment.js

const config = environment.toWebpackConfig();
config.resolve.alias = {
    jquery: 'jquery/src/jquery'
}

Теперь config/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']
    })
)

const config = environment.toWebpackConfig();
config.resolve.alias = {
    jquery: 'jquery/src/jquery'
}

module.exports = environment;

БЛОГ НА HUSL

Не могу подключить bootstrap.js через webpacker

Ответы (1 шт):