CODEWITHSUNDEEP
jquerywebpackasset-pipelineruby-on-rails-6
João Ramires
João Ramires

Reputation: 763

Rails 6 Asset Pipeline: How to import vendor scripts in application.js?

I'm trying to properly import vendor js files in my application.js under app/javascript/packs/application.js

This is the current architecture:

javascript-folder-architecture

As is possible to see, I choose to put vendor js files in app/javascrip/plugins/

I've structured the application.js like this:

// Rails Internals
require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");

// Libraries/Vendor-plugins
require("jquery");
import 'bootstrap';
require('../plugins/chosen.min.js');
require('../plugins/magnific-popup.min.js');
require('../plugins/owl.carousel.min.js');
require('../plugins/rangeSlider');
require('../plugins/sticky-kit.min.js');
require('../plugins/masonry.min.js');
require('../plugins/mmenu.min.js');
require('../plugins/tooltips.min.js');
require('../plugins/custom');


// Custom functions
// import { myFunction } from '../components/myScrip';

document.addEventListener('turbolinks:load', () => {
});

By doing this, the jQuery should be accesible by the custom.js file located in app/javascript/plugins/custom.js, right?

To make things clear, the custom.js has this shape:

(function ($) {
    "use strict";
    $(document).ready(function () {
      // ...
    }
})(this.jQuery);

But when I run the server, the jQuery can't be found:

jquery-error

I've added jQuery and bootstrap via yarn add [email protected] [email protected] (old versions needed by the vendor).

My Webpack enviroment.js is like this:

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
);

module.exports = environment;

I tried to find answer in The Asset Pipeline on Ruby Guides. but seems that the tutorial is a little out of date.

Upvotes: 1

Views: 4031

Answers (3)

bright
bright

Reputation: 191

Add your new directory to the lookup file of webpacker.

In config/webpacker.yml add:

additional_paths: ['your/path']

In this specific case:

additional_paths: ['app/javascript/plugins/']

Upvotes: 5

Helper
Helper

Reputation: 1

you can simply use this in your $ruby_app/app/javascript/packs/application.js just to declare jQuery

window.jQuery = $;
window.$ = $;

Upvotes: 0

João Ramires
João Ramires

Reputation: 763

Well I don't know if this is the best approach, but I manage to solve the problem.

To do that I wrapped the custom.js with:

const custom = () => {

  (function (root, factory) {
    if (root === undefined && window !== undefined) root = window;
    if (typeof define === 'function' && define.amd) {
      // AMD. Register as an anonymous module unless amdModuleId is set
      define(["jquery"], function (a0) {
        return (factory(a0));
      });
    } else if (typeof module === 'object' && module.exports) {
      // Node. Does not work with strict CommonJS, but
      // only CommonJS-like environments that support module.exports,
      // like Node.
      module.exports = factory(require("jquery"));
    } else {
      factory(root["jQuery"]);
    }
  }(this, function (jQuery) {
   (function ($) { // start of custom.js file.
    "use strict";
    $(document).ready(function () {
      // ...
    }
})(jQuery); // end of custom.js file.
}

I still having little issues with some things inside of custom.js but at least it is being loaded properlly.

Better ideas on how to solve this please post your answer. Cya!

Upvotes: 1

Related Questions