Where to find the JS to require from Gems in Rails 6 webpacker

Question

Everytime I need to install a gem on my Rails 6 application (webpacker), I can't find where to require the JS from the gem as I used to do on previous Rails versions.

This is the way it used to be app/assets/javascripts/application.js

//= require gem_name

But now , as app/assets/javascripts has disappeard from assets

I thought I had to require it from app/javascript/packs/application.js like this

require("gem_name").start

But as I do this, even though I have my Gemfile with

gem 'gem_name'

and bundle installed it

it raises an uncaught JS error:

Uncaught Error: Cannot find module 'gem_name'

How and where should I require the gems JS? It's really not clear to me Thank you

Answer 1

If you want a hacky answer we will need to know which gem you’re trying to install.

However, especially if this is a new rails-6 project, you’ll be better off spending some time learning how Rails 6 uses webpacker. Once you’ve got the hang of that you have access to any js package.

I found https://hackernoon.com/integrate-bootstrap-4-and-font-awesome-5-in-rails-6-u87u32zd to be a great place to start.

But again, if you tell us which JS package (or which gem wrapper of it) you’re trying to install we can answer more specifically.

Answer 2

As for webpacker we need to add the js files separately from the gem, it may seem like kind of regression, as with sprockets we have added the files from the gem folder. Webpack brings us a lot of great features as well as some headaches. And since webpacker is a relatively new framework, many gems have not switched to a new format.

If the gem added support for webpack packed their js inside es6 modules (easy way) we just install the js with Yarn, and require it as you mentioned above.

Let's see an example based on i18n-js gem. in previous version (sprockets) we were needed to:

1 # add gem to the gemfile
=> gem "i18n-js"
2 # run gem install
=> gem install "i18n-js"
3 # require gem js inside aplication.js
=> //= require i18n.js

With webpacker the same process will look like this:

1 # install the js with Yarn # 
=> yarn add i18n-js

Three comments on this, first, as you may see i18n-js is fully js gem, so there no need to add this to the gemfile (rails ujs is additional fully js files that was previously inside the gemfile), second, gems may content js, CSS, and ruby, with webpacker we mostly getting rid of js gems types, and depend on how you handle the CSS, we may get rid of CSS types gems (like bootstrap gem that is js and CSS gem) counter-intuitive, but we can handle and install modules\packges with Yarn that include js and CSS files, and webpack is works well with both. Although by convention it still suggested using sprockets for CSS, so we just set the routs to the node_modules when needed. In the last third point, its always good practice to look at the yarn yarnpkg.com/package to see if the gem has a package we can add.

2 # added installed package to the pack\page you need the package
  import I18n from "i18n-js"
3 # now you can set the language for the package
  I18n.defaultLocal = 'he' 

OK, but what if the gem has no module\packege? it's only a little complicated here, depends on the case, sometimes you can just take the code from gem and add it through import inside your javascript folder, or if the code has no module you can use exports-loader package to pack old js code to modules.