title: Rails 6 Asset Pipeline: How to import vendor scripts in application.js?
body: <p>I'm trying to properly import vendor js files in my application.js under <code>app/javascript/packs/application.js</code></p>
  <p>This is the current architecture:</p>
  <p><a href="https://i.stack.imgur.com/hudRb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hudRb.png" alt="javascript-folder-architecture" /></a></p>
  <p>As is possible to see, I choose to put vendor js files in <code>app/javascrip/plugins/</code></p>
  <p>I've structured the <code>application.js</code> like this:</p>
  <pre class="lang-js prettyprint-override"><code>// Rails Internals
  require(&quot;@rails/ujs&quot;).start();
  require(&quot;turbolinks&quot;).start();
  require(&quot;@rails/activestorage&quot;).start();
  require(&quot;channels&quot;);
  
  // Libraries/Vendor-plugins
  require(&quot;jquery&quot;);
  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', () =&gt; {
  });
  
  </code></pre>
  <p>By doing this, the jQuery should be accesible by the <code>custom.js</code> file located in <code>app/javascript/plugins/custom.js</code>, right?</p>
  <p>To make things clear, the <code>custom.js</code> has this shape:</p>
  <pre class="lang-js prettyprint-override"><code>(function ($) {
      &quot;use strict&quot;;
      $(document).ready(function () {
        // ...
      }
  })(this.jQuery);
  </code></pre>
  <p>But when I run the server, the jQuery can't be found:</p>
  <p><a href="https://i.stack.imgur.com/dnkdr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dnkdr.png" alt="jquery-error" /></a></p>
  <p>I've added jQuery and bootstrap via <code>yarn add jquery@3.5.1 bootstrap@3.4.1</code> (old versions needed by the vendor).</p>
  <p>My Webpack enviroment.js is like this:</p>
  <pre class="lang-js prettyprint-override"><code>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;
  
  </code></pre>
  <p>I tried to find answer in <a href="https://guides.rubyonrails.org/asset_pipeline.html#search-paths" rel="nofollow noreferrer">The Asset Pipeline on Ruby Guides.</a> but seems that the tutorial is a little out of date.</p>