bhadresh chotaliya

Joined

50 Experience
0 Lessons Completed
0 Questions Solved

Activity

Posted in Rails 6 webpacker with theme implementation error.

I am creating one rails application with the latest version 6.1.3 and ruby version 2.7.2. I have one old theme and I want to integrate it into my application.

But somehow I can not able to integrate it successfully. Please check my error and integration steps below.
Error:

theme.js:26 Uncaught TypeError: $(...).ImagesLoaded is not a function

app/javascript/packs/application.js

  import Rails from "@rails/ujs"
  import Turbolinks from "turbolinks"
  import * as ActiveStorage from "@rails/activestorage"
  import "channels"
  import "jquery"
  import "popper.js"
  import "bootstrap"
  require("./external/imagesloaded.min")
  require("./external/isotope.min")
  require("./external/simpleLightbox.min")
  require("./external/theme")

  Rails.start()
  Turbolinks.start()
  ActiveStorage.start()

All custom theme js files store in app/javascript/packs/external.
app/javascript/packs/external/theme.js

    ;(function($){
    "use strict"

    /*  Isotope Fillter js */
      console.log("file execute successfully");
      function gallery_isotope(){
      if ( $('.gallery_f_inner').length ){
        // Activate isotope in container
        $(".gallery_f_inner").imagesLoaded( function() {
          $(".gallery_f_inner").isotope({
            layoutMode: 'fitRows',
            animationOptions: {
              duration: 750,
              easing: 'linear'
            }
          });
        });

        // Add isotope click function
        $(".gallery_filter li").on('click',function(){
          $(".gallery_filter li").removeClass("active");
          $(this).addClass("active");

          var selector = $(this).attr("data-filter");
          $(".gallery_f_inner").isotope({
            filter: selector,
            animationOptions: {
              duration: 450,
              easing: "linear",
              queue: false,
            }
          });
          return false;
        });
      }
    }
    setTimeout(() => {
      gallery_isotope();
      $('.imageGallery1 .light').simpleLightbox();
    }, 800);

  })(jQuery)

I tried all possible solutions but I have 7 custom js files and each file in a minimum of 16 different kinds of functions so it's very tough to convert all js files manually.

Please guide me where I am wrong and suggest me a feasible solution. Thanks in Advance.