How to use cocoon gem in Rails 6

Question

Have been using cocoon gem for nested forms in rails 4 & rails 5 apps. Currently, I was updating one of the rails 5.2 app (which is using cocoon gem) to rails 6.

As rails 6 is using webpacker, so I tired to require cocoon javascript in application.js file as we used to do in previous versions of rails.

app/javascript/application.js

//= require cocoon

But unfortunately, things do not seem to work. Have also tried to import but of course, it's also not working as the cocoon is not available as a javascript package.

Any solution or alternate for this?

Sikandar Tariq · Accepted Answer · 2021-05-04T17:12:29.000

25

Updated Solution: Cocoon package has been release so one can easily use this with wepacker

Inside your Gemfile add the following:

gem "cocoon"

Add the componanion package

yarn add @nathanvda/cocoon

and then in your app/javascripts/packs/application.js you should add

require("jquery")
require("@nathanvda/cocoon")

Old Solution:

There is this Pull Request on cocoon GitHub repository that worked perfectly for me.

Package.json is provided in this branch so we can use yarn or npm to install package by providing GitHub repo link.

yarn add github:nathanvda/cocoon#c24ba53

Cocoon package will install and you can check your package.json file.

"cocoon": "github:nathanvda/cocoon#c24ba53"

commit number #c24ba53 is important, make sure it is included in your package.json file

After this, you can import cocoon.js in application.js file.

import "cocoon";

edited May 04 '21 at 17:12

answered Sep 18 '19 at 05:03

Sikandar Tariq

1,296
1
13
29

Not working. Getting error like "undefined method `link_to_add_association' for" – faisal bhatti Jun 28 '20 at 10:46
1

@faisalbhatti you'll have to install gem too as we do normally. this is for just the part where we import javascript file – Sikandar Tariq Jun 28 '20 at 14:18
Actually we should call on appplication.js " import 'cocoon/app/assets/javascripts/cocoon' " – Fillype Farias Aug 26 '20 at 20:03

score 3 · Answer 2 · answered Sep 17 '19 at 14:48

3

There is an 'hack' on the cocoon page for this:

https://github.com/nathanvda/cocoon/issues/555

answered Sep 17 '19 at 14:48

Hackman

1,614
1
12
15

score 2 · Answer 3 · answered Apr 04 '20 at 19:30

2

First: run

yarn add cocoon-js

Second: add to application.js

import 'cocoon-js'

answered Apr 04 '20 at 19:30

shilovk

11,718
17
75
74

What about the `link_to_add_association` and other helper methods? – marvin May 02 '20 at 03:57

score 0 · Answer 4 · answered Mar 23 '21 at 00:41

0

Install the cocoon rubygem as usual

yarn add cocoon-js-vanilla

// app/javascript/packs/application.js At the top of this file do:

import "cocoon-js-vanilla";

Inspired by: https://github.com/joerodrig/cocoon-js

answered Mar 23 '21 at 00:41

Francisca Vargas

21
2

How to use cocoon gem in Rails 6

4 Answers4