dm

Joined

50 Experience
0 Lessons Completed
0 Questions Solved

Activity

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

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.