How to use third party plugin in rails 6? Using webpacker

Question

How can I use the the third party plugin via webpacker. I dont want to use cloudfare external link in application.html.erb.

Why means, I just want to compile all the plugin while application loading for the initial time.

Thanks in advance :)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= yield(:title).present? ? yield(:title) : 'Tryblank' %></title>
    <meta name="description" content="<%= yield(:description).present? ? yield(:description) : 'Tryblank' %>" />
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
  </head>
  <body>
    <%# <p class="notice"> notice</p> <p class="alert">alert</p> %>
    <%= yield %>
  </body>
</html>

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

import '../stylesheets/style'
import './default.js' 
import './bootstrap_custom.js'
import './side_menu.js.erb'
//import './sweetalert.js'
import './business_hours.js'
import './admin.js'
import './services.js'
import './user_service.js'

score 3 · Answer 1 · edited Nov 26 '19 at 17:13

I answered a similar question here: https://stackoverflow.com/a/58794513/12104222

There, I explained how to include jquery, bootstrap and popper.js to a project using yarn, and then two different approaches to actually importing the libraries (or modules) to use them in your app, depending on whether you need to expose the modules as a global plugin (something you probably want only for jQuery and similar global libraries) or not, as a single import (the most common option, which I exemplified with Bootstrap).

Updated with instructions for sweetalert & lightgallery, as requested by OP:

Run $ yarn sweetalert lightgallery lg-thumbnail (or whatever plugins you may need; you can also use yarn sweetalert@2.1.2, etc if you need a specific version of the plugin). That will install the modules in your node_modules directory, and will make them available to Webpacker. You will also need $ yarn jquery to install jquery as a node module as well.
Edit your config/webpack/environment.js so it looks like this:

# Some other previous code

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

module.exports = environment

That will ensure jQuery is exposed to every other plugin that depends on it.

Edit app/javascript/packs/application.js so it looks like this:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//require("jquery") //commented as you loaded jQuery before.

import '../stylesheets/style'
import './default.js' 
import './bootstrap_custom.js'
import './side_menu.js.erb'
import swal from 'sweetalert' //Note you don't need './' in your path if you import via yarn
import 'lightgallery'
import './business_hours.js'
import './admin.js'
import './services.js'
import './user_service.js'

Import lightGallery.css in your application.scss
Remove these lines from your view, since you will be loading them using webpack:

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

By now, you've installed jQuery, lightgallery and sweetalert as webpack modules. I cannot guarantee, however, that this will work in your case since the code you provided looks like it's importing a lot of different plugins from many different sources (webpack, CDN, maybe also sprockets) which can (and probably will) cause conflicts between them. If possible, I'd recommend you replace every <script> tag with the correct import method for webpack, which is just following the method I described for the plugins you mentioned in this answer, but applying them to your other libraries/plugins.

Edit 2: Remember that, if you use Turbolinks (and it looks like you do), you need to replace this sort of code:

$(document).ready(function() {
        $("#lightgallery").lightGallery(); 
    });

With this:

$(document).on('turbolinks:load', function() {
        $("#lightgallery").lightGallery(); 
    });

Good luck!

Can you please explain more about this. Because I don't know how to import sweetalert and lightgallery in environment.js . — Siva Ganesh, Nov 15 '19 at 04:12
very sorry for the late reply. ReferenceError: Swal is not defined. I followed your every steps. But still I'm facing this issue — Siva Ganesh, Nov 23 '19 at 09:14
This is a great post. Which directory is being referred to in the directive ```import './bootstrap_custom.js'```? — Obromios, Jan 02 '20 at 22:58
Got it all working except that the CSS is requiring some fonts that I don't from where and how to import. The path is '/fonts/lg.woff2' and I get this error 'application.scss:4 Uncaught Error: Cannot find module '../fonts/lg.woff2?io9a6k'' — migu, Oct 04 '21 at 19:30

How to use third party plugin in rails 6? Using webpacker

1 Answers1

Updated with instructions for sweetalert & lightgallery, as requested by OP: