I encountered some unusual issues while using Bootstrap 4 with the Rails 5 javascript tags. Initially, everything was working smoothly on this project and I hadn't made any modifications to the js files. However, suddenly, my collapsible navbar dropdowns ceased to function, accompanied by the following 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)
The setup involves Rails 5.2.4.1 with Ruby 2.6.3 alongside Bootstrap 4.
In the application.html.erb file, I have placed these javascript tags at the end of the body:
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
However, it seems like the issue lies within the tags or the files themselves, as directly adding these Bootstrap script tags into the application.html restores the functionality of my dropdowns:
<!-- 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5859a85859087db9f86b5c4dbc4c3dbc5">[email protected]</a>/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>
This situation is quite perplexing, and I aim to ascertain whether the include_tag and pack_tag are functioning correctly to leverage the asset pipeline for organizing additional js files in folders when needed.
Here's a glimpse into my assets/javascripts/application.js:
//= require rails-ujs
//= require_tree .
Meanwhile, my javascript/packs/application.js looks like:
import "bootstrap";
Lastly, here's a peek at my config/webpack/environment.js file:
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 utilizing a Devise template created by the LeWagon bootcamp, and still navigating through its interactions. To ensure all bases are covered, here's the gemfile that was generated:
source 'https://rubygems.org'
ruby '2.6.3'
gem 'bootsnap', require: false
gem 'devise'
...
Could there be other files impacting this scenario that I might have overlooked? Any insights on spotting a simple glitch would be greatly appreciated. This dilemma is really testing my patience lol.
Thanks a bunch in advance!