CODEWITHSUNDEEP
javascriptruby-on-railswebpackbootstrap-4asset-pipeline
angst
angst

Reputation: 49

Rails 5 Bootstrap Javascript Tags Not Working

I'm having strange issues with Bootstrap 4 and the Rails 5 javascript tags. Everything seemed to work fine when I started on this project and I haven't made any changes to any of the js, but suddenly my collapsable navbar dropdowns stopped functioning, and I can see these errors in the console:

GET http://localhost:3000/packs/js/application-48ce69a491950ec17b29.js net::ERR_ABORTED 404 (Not Found)

GET http://localhost:3000/packs/js/application-48ce69a491950ec17b29.js net::ERR_ABORTED 404 (Not Found)

I am using Rails 5.2.4.1 with Ruby 2.6.3 and Bootstrap 4.

In my application.html.erb I have these javascript tags at the end of the body:

<%= javascript_include_tag 'application' %>

<%= javascript_pack_tag 'application' %>

But I think the problem must be contained in the tags or the files, because when I directly add these Bootstrap script tags into the application.html my dropdowns start working again:

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

So this is really confusing me and I want to make sure that the include_tag and pack_tag are actually working so that I can use the asset pipeline to keep other js files organised in folders when I need more.

This is my assets/javascripts/application.js:

//= require rails-ujs
//= require_tree .

And my javascript/packs/application.js:

import "bootstrap";

And here is my config/webpack/environment.js

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

const webpack = require('webpack')

// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');

// Bootstrap 4 has a dependency over jQuery & Popper.js:
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

I'm using a Devise template made by the LeWagon bootcamp and am not yet confident of how everything is interacting. So here is the gemfile it generated for safe measure:

source 'https://rubygems.org'
ruby '2.6.3'

gem 'bootsnap', require: false
gem 'devise'
gem 'jbuilder', '~> 2.0'
gem 'pg', '~> 0.21'
gem 'puma'
gem 'rails', '5.2.4.1'
gem 'redis'

gem 'autoprefixer-rails'
gem 'font-awesome-sass', '~> 5.12.0'
gem 'sassc-rails'
gem 'simple_form'
gem 'uglifier'
gem 'webpacker'

group :development do
  gem 'web-console', '>= 3.3.0'
end

group :development, :test do
  gem 'pry-byebug'
  gem 'pry-rails'
  gem 'listen', '~> 3.0.5'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  gem 'dotenv-rails'
end

Am I forgetting to include any other files that might be affecting this? Hopefully someone can spot a simple problem in here, but happy to add more info if I've missed something. This is really getting on my goat lol.

Thanks in advance!

Upvotes: 0

Views: 1156

Answers (1)

mechnicov
mechnicov

Reputation: 15248

It's not good idea to have javascript_include_tag 'application' and javascript_pack_tag 'application' at the same time

If you use webpacker you don't need app/assets/javascripts folder

And you need to change app/javascript/packs/application.js to something like this:

require("@rails/ujs").start();
require("@rails/activestorage").start();
require("channels");
require("jquery");

import "bootstrap";

Upvotes: 1

Related Questions