CODEWITHSUNDEEP
javascriptruby-on-railsbootstrap-4
Jim B
Jim B

Reputation: 217

Bootstrap & Rails 6 (no webpack) - Default bootstrap javascript not working

I've created a new rails app using --skip-webpack-install but it seems that whilst the default bootstrap styles work, not all the javascript seems to be working.

My application.js has the jquery and bootstrap js code within it, but adding in a carousel or something like that doesn't work.

Weirdly, modals work...

My application.js is as follows

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery
//= require_tree .

and it's imported into the application using

<%= javascript_include_tag 'application' %>

My assets.rb is as follows

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

Any advice would really help and if you need any more information, I can get it :)

Upvotes: 1

Views: 723

Answers (1)

Prikesh Savla
Prikesh Savla

Reputation: 356

Refered this https://thejspr.com/blog/use-sprockets-for-javascript-in-rails-6/

Remove the webpacker gem, bundle install and restart.
yarn remove @rails/webpacker.
rm -r config/webpack.
rm config/webpacker.yml.
Change any javascript_pack_tag to javascript_include_tag.
Create app/assets/javascripts/application.js and //= require X any libs you need.
Add //= link_directory ../javascripts .js to app/assets/config/manifest.js
bundle remove webpacker

My application.html.erb

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

my app/assets/javascripts/application.js

//= require jquery3
//= require bootstrap

The piece of code I ran in a scaffold to test carousels


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

Upvotes: 1

Related Questions