All threads / How to load jquery and other vendor js & css files through importmap in Rails 7
Ask A Question

Notifications

You’re not receiving notifications from this thread.

How to load jquery and other vendor js & css files through importmap in Rails 7

dm asked in Rails

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

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 66,029+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.