CODEWITHSUNDEEP
ruby-on-railsruby
Neil
Neil

Reputation: 5178

How to require in jQuery code that exists within a ruby gem in Rails 6

I found online resources for how to add jQuery itself into a rails 6 app, but I was having trouble finding out how to require in the jquery code that exists inside of a rubygems.org gem.

I am trying to require in the jQuery code from the nested_form_fields gem.

Here is how I did it in Rails 5:

  1. Add the gem within the Gemfile:

    gem 'nested_form_fields

  2. Run bundle install to install the gem:

  3. Add the following line within app/assets/javascripts/application.js to require in jquery code from the third party gem:

    //= require nested_form_fields

And that is it.

Here is how I attempted to do it in Rails 6:

  1. Add the following line into app/javascript/packs/application.js to load in jquery:

    require("jquery")

  2. Add the gem within the Gemfile:

    gem 'nested_form_fields'

  3. Run bundle install to install the gem:

  4. Add the following line within app/javascript/packs/application.js to bring in the javascript code which exists inside the nested_form_fields gem:

    require("nested_form_fields")

When I boot up my app and look at web inspector it says the following:

Error: Cannot find module 'nested_form_fields'

I didn't expect it to work via yarn either because nested_form_fields isn't a package within yarn. Instead: I'm simply trying to require in the javascript code that happens to exist inside of a ruby gem. But for good measure I attempted it anyways just to rule that out:

yarn add nested_form_fields
...
=> error An unexpected error occurred: "https://registry.yarnpkg.com/nested_form_fields: Not found".

I know this is going to be one of those things where I forgot to do something simple, but I've been at this for a while and another pair of eyes might be able to catch it quickly.

Upvotes: 1

Views: 244

Answers (1)

Neil
Neil

Reputation: 5178

The design of Rails 6 is steering developers away from the asset pipeline and towards webpack. It appears that this means gems used in rails, which contain javascript, will likely need to be updated.

  • Specifically: instead of hardcoding the javascript into the ruby gem, the ruby gem would only reference the dependent javascript. That dependent javascript would exist separately in the npm repository. I'm no expert, but I believe this is the idea.

My solution was to swap out nested_form_fields for cocoon which essentially provides the same nested-form-handling behavior.

The funny thing is that cocoon is in the exact same predicament as nested_form_fields. However, cocoon is more popular and likewise has more community looking for the best way to solve this puzzle. Issue #555 captures this particular problem.

I eventually decided to implement the temporary work around described in this comment. Essentially what I did was I copy/pasted the jQuery code from the cocoon gem into my rails app, and then I required that code into webpack.

Steps to get Cocoon Up and Running in Rails 6

  1. Add cocoon to the Gemfile

    gem "cocoon"

  2. Run bundle install to install the gem.

  3. Copy/paste the cocoon javascript code located here into a new file at: app/javascript/src/cocoon.js

  4. Add the following two lines into javascript/packs/application.js. Cocoon depends on jquery so we need to require that in, and then of course require in the cocoon javascript that we copy/pasted in step #3:

    require("jquery")
require("src/cocoon.js")

That is the best temporary strategy that I am aware of.

Upvotes: 1

Related Questions