Bootstrap's Javascript not working in Rails 6 webpacker setup

Question

Bootstrap's Javascript not working in Rails 6 webpacker setup

1.8k Views Asked by Roger Graves At 19 October 2024 at 19:45

Started a new Rails 6.0.3 project and added jQuery and Bootstrap. jQuery works fine and the Bootstrap CSS seems to render properly but whenever I try running $.fn.tooltip.Constructor.VERSION in the browser javascript console I get an error Uncaught TypeError: Cannot read property 'tooltip' of undefined. Also trying to add plugins like bootstrap-select, Bootstrap Tags Input, etc. all fail. I'm not sure if it's related but I've also had the same trouble adding awesome-fonts, the CSS works but Javascript does not. Below are configs that might be relevant:

// package.json
{
  "name": "myproject",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "bootstrap": "^4.5.2",
    "channels": "^0.0.4",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "axios": "^0.20.0",
    "cypress": "^5.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

// 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

// config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

// app/javascript/packs/application.js
require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap")

// app/views/layouts/application.html.erb
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <title>My Project</title>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Original Q&A

There are 1 best solutions below

**Roger Graves** · Accepted Answer

Got it working through the following addition...

// config/webpack/custom.js
module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
};

... and changes:

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')

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

environment.config.merge(customConfig)
module.exports = environment

// config/webpack/environment.js
require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap")

import $ from "jquery"

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

Related question that was helpful in getting to a solution: $(...).tooltip is not a function rails 6 webpack

Bootstrap's Javascript not working in Rails 6 webpacker setup

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in RUBY-ON-RAILS

Related Questions in BOOTSTRAP-4

Related Questions in WEBPACKER

Trending Questions

Popular # Hahtags

Popular Questions