How to load jquery and other vendor js & css files through importmap in Rails 7
Hi, I am trying to re-building a website using Rails7 and Bootstrap4, which was already developed in Rails5 and Bootstrap3. I have faced some problem of loading jquery and css files. I followed the bellow steps for website development :
1) First created new rails7 app with mysql database
2) Created a controller with index
3) Created db
4) Added gem 'bootstrap', '~> 4.3.1', gem 'font-awesome-rails' and gem "sassc-rails"
5) Run bundle install
6) Download the jqury-3.1.1.min.js, pace.min.js, jquery.peity.min.js, jquery.slimscroll.min.js, jquery.metisMenu.js files and saved into project's vendor/javascript folder.
7) Download the animate.css file and saved into project's assets/stylesheets folder
8) Add pin command in importmap.rb file:
pin "jquery", to: "jquery-3.1.1.min.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "popper", to: "popper.js", preload: true
pin "pace", to: "pace.min.js", preload: true
pin "peity", to: "jquery.peity.min.js", preload: true
pin "slimscroll", to: "jquery.slimscroll.min.js", preload: true
pin "metismenu", to: "jquery.metisMenu.js", preload: true
9) Add into application.js file:
import "jquery"
import "popper"
import "bootstrap"
import "pace"
import "peity"
import "slimscroll"
import "metismenu"
10) Created new application.scss file and delete older application.css file
11) Add into application.scss file:
@import "bootstrap"; @import "animate.css"; @import "font-awesome";
12) Add into assets.rb file:
Rails.application.config.assets.precompile += %w( application.scss jquery-3.1.1.min.js bootstrap.min.js popper.js )
13) Set the index path in routes.rb file
14) Added custom jquery functions in the application.html.erb file:
$(function() { $('body').scrollspy({ target: '.navbar-fixed-top', offset: 80 }); });
15) Run the rails server
Then I opened the chrome browser and run "http://localhost:3000/" and getting bellow errors:
i) Uncaught ReferenceError: $ is not defined
ii) Failed to resolve module specifier "popper". Relative references must start with either "/", "./", or "../".
iii) Uncaught TypeError: $(...).scrollspy is not a function
Here if I add this <%= javascript_include_tag "jquery-3.1.1.min" %> before the <%= javascript_importmap_tags %> in application.html.erb then "Uncaught ReferenceError: $ is not defined" error was gone.
I am searching in google and trying lot of ways but no fruitful result came. So please help me if I am doing any thing wrong here.
Thanks