Bootstrap and Rails 6 without webpack: default Bootstrap JavaScript functionality malfunctioning

I recently developed a new rails app using the --skip-webpack-install option, and while the default bootstrap styles are functioning properly, some of the JavaScript components don't seem to be working as expected.

Even though my application.js file contains jQuery and Bootstrap JS code, adding features like carousels doesn't seem to work. Interestingly, modals do work...

Here's a snippet of my application.js:

// This manifest file will compile all files into application.js
// Any JavaScript/Coffee file in lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery
//= require_tree .

To import this script into the application, I'm using:

<%= javascript_include_tag 'application' %>

This is how my assets.rb looks:

Rails.application.config.assets.precompile += %w( application.js application.scss )

I would greatly appreciate any advice on how to resolve this issue. Feel free to ask for more information if needed :)

Answer №1

Here is a useful guide on how to use Sprockets for JavaScript in Rails 6:

Follow these steps:
- Remove the webpacker gem, then run bundle install and restart.
- Remove yarn package by running 'yarn remove @rails/webpacker'.
- Delete config/webpack directory.
- Delete config/webpacker.yml file.
- Change any javascript_pack_tag instances to javascript_include_tag.
- Create app/assets/javascripts/application.js file and include //= require X for any necessary libraries.
- Add //= link_directory ../javascripts .js to app/assets/config/manifest.js
- Finally, remove webpacker using bundle remove webpacker command.

This is what my application.html.erb file looks like:

<!DOCTYPE html>
<html>
  <head>
    <title>Jim</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

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

And here is my app/assets/javascripts/application.js file:

//= require jquery3
//= require bootstrap


The following code was used to test carousels in a scaffold:


<p id="notice"><%= notice %></p>

<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/200" class="d-block w-100" alt="https://picsum.photos/200">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/200" class="d-block w-100" alt="https://picsum.photos/200">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/200" class="d-block w-100" alt="https://picsum.photos/200">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The 3D cube in Three.js gains momentum with each re-initialization, spinning faster and faster

I'm puzzled by a phenomenon with the first Three.js example: the spinning 3D cube spins faster and faster every time it is re-initialized. The code consists of an init function that sets up the scene and an animate function that kicks off the animati ...

PHP issues caused by Ajax form compatibility

I'm currently working on developing an upload website and I've encountered some challenges while trying to implement an upload progress bar. The Ajax form in my scripts seems to be causing issues with the PHP code, preventing the file from being ...

Parsing form bodies in Express.js allows for easy extraction of data

Below is an example of a form: <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> < ...

Leverage the TypeScript-generated controller within an Angular directive

I currently have an Angular controller that was generated using TypeScript: class FileManagerController { ... constructor($scope) { $scope.vm = this; ... } ...functions... } Can you guide me on how to integrate this controller i ...

Is there a way to choose a mat option by pressing the tab key? It should function similarly to the enter button in a mat-autocomplete component in Angular

Is it possible to make the tab key select the mat option in a similar way to how the enter button works in mat-autocomplete for Angular 6? Currently, in the example URL provided, pressing enter selects the highlighted option, but I would like the same func ...

"Unleashing the power of React Native: A single button that reveals three different names

I have a piece of code that changes the name of a button from (KEYWORD) to a different one (KEYNOS) each time it is clicked. How can I modify it to change to a third value (KEYCH), where the default name is (A, B, C... etc), the first click shows Numbers ...

What could be causing NestJS/TypeORM to remove the attribute passed in during save operation?

Embarking on my Nest JS journey, I set up my first project to familiarize myself with it. Despite successfully working with the Organization entity, I encountered a roadblock when trying to create a User - organizationId IS NULL and cannot be saved. Here ...

Learn the process of adjusting opacity for a specific color in CSS

At the moment, this is the code I'm using to apply a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I am interested in finding out if there is a way to add opacity based o ...

The admin-ajax.php file in WordPress consistently fails to return any value other than

I developed a WordPress ajax plugin, but I am facing an issue where admin-ajax.php always returns 0 and the plugin doesn't work as expected. Here is the code I have implemented: add_action( 'wp_ajax_example_ajax_request', 'example_aja ...

Display a new view upon clicking a button using AngularJS in a single-page web application

I am completely new to AngularJS and currently working on my first project. I apologize in advance if my question seems very basic. In my project, I have created a page using simple HTML with three buttons. When these buttons are clicked, I want to load v ...

Successfully processed but not authorized. The request was redirected to a destination that does not allow cross-origin requests needing preflight checks

Despite following similar questions on stackoverflow, I am encountering a unique issue while trying to connect to a Rails API using Ionic. My current setup includes Rails 4, Devise for authentication, simple_token_authentication gem for token-based API re ...

Send a query to Express as a parameter

Currently, I have implemented an ejs file that contains a table element with clickable rows defined as follows: <tr onclick="myFunction(this)"> To pass a query parameter in an http request using javascript, I have the following code snippe ...

What steps should I follow to enable a tooltip in this specific situation using qtip?

In my database, I have tables for venues, venue types, and map icons with the following relationships: A venue belongs to a venue type A venue type belongs to a map icon Each venue result is shown on the index page as a partial. Each partial ...

Can you explain the contrast between 'depict' and 'examine' when using Jest?

I am currently diving into the world of unit testing in Vue.js with Jest. One question that keeps popping up is when to use describe and when to use test ? TodoApp.vue Component : <template> <div> <h1>TodoApp Componenent</h1> ...

Utilizing AngularJS to Retrieve Row Information Upon Button Selection

I'm currently developing an application that includes a feature allowing users to run a query from a drop-down menu and view the data in a table. Each row in the table will have a button, and when clicked, I need to capture the values of that specific ...

I'm experiencing an issue with my API where it is returning invalid JSON data when I make a POST request using

I have a scenario where I am making a post request to my Next.js API for updating an address. The code snippet below shows the function that handles fetching: async function handleSubmit() { const data = { deliveryAddress, landmark, pincode, district, bl ...

Works perfectly in Firefox, experiencing glitches in Chrome

After creating a page that utilizes a simple JSon table and JS/JQ to display data, I noticed a slight bug in Chrome when the files were separated into HTML, CSS, JS, and JSON components. The page works perfectly in both Chrome and FF when hosted together o ...

Exclusive carousel design for mobile users with bootstrap framework only

I need help with customizing the bootstrap4 carousel. Currently, I have a carousel that works on all devices, but I want it to only display on mobile devices. On desktops, I want the photos to be displayed side by side. I know I can create two container ...

When attempting to showcase user profiles, I encounter the issue stating "the parameter is absent or the value is void: user_id."

After putting effort into developing my initial test app, I have encountered an issue with enabling users to click on "My Profile" in a dropdown and then being redirected to their profile page. Despite conducting thorough research, I have not been successf ...

A distinctive noise is heard when hovering over multiple instances of a div

I'm trying to implement a feature where a unique sound plays when hovering over a specific div element with a particular class (.trigger). However, I am encountering an issue where multiple instances of this div class result in the same sound being pl ...