Webpacker / Rails 6

[jttmckee]

Hi this gem doesn't work with Rails 6 in the default configuration as the asset pipeline has been replaced with Webpacker (at least for Javascript). Is there any chance you could add a package.json and load to NPM? I can't figure out how else to get it to work with Webpacker!

[balakirevs]

@jttmckee currently use https://github.com/Alex-D/cookies-eu-banner
or for rails 6 do:

• add erb support to webpacker rails webpacker:install:erb
• rename app/javascript/packs/application.js to app/javascript/packs/application.js.erb or better create file like gems.js.erb & import it to app/javascript/packs/application.js -> import './gems.js.erb';
• put these inside application.js.erb:

import '<%= File.join(File.join(Gem.loaded_specs['cookies_eu'].full_gem_path, 'app', 'assets', 'javascripts', 'cookies_eu.js')) %>'
import '<%= File.join(File.join(Gem.loaded_specs['cookies_eu'].full_gem_path, 'app', 'assets', 'stylesheets', 'cookies_eu.scss')) %>'

[matissg]

@jttmckee Thank you for the solution regarding .js.erb. I'm wondering, why I see this error in my Chrome console, when I click on the notice "Ok" button?

Uncaught ReferenceError: Cookies is not defined
    at HTMLButtonElement.setCookie (cookies_eu.js:28)

Basically the notice is generated as expected, however I can't accept it with "Ok" button.

[rkiller]

yarn add js.cookie
in application.js
import Cookies from 'js.cookie';
window.Cookies = Cookies;

[noahgibbs]

Gem.loaded_specs['cookies_eu'] is nil for me, even though Gemfile.lock lists the gem appropriately. That keeps my .js.erb file from working. I tried an old Bundler (1.17.3) and a new one (2.1.2) and I have the same result with both.

It looks like if I add a line higher in application.js.erb I can fix it:

<% gem("cookies_eu") %>

[gabskoro]

We can't really make it work for RoR 6, but what you could do (even it's not suggested by the rails team) is #85 (comment)

Not sure what could we do more here :(

[Bodata]

Ok, it took me half a day to get this to work.
the comment of rkiller did 50 % for me. But did not work.

This is what i did in the project directory:

• yarn add js.cookie
• bundle exec rails webpacker:install:erb

In the javascript/packs/application.js i added 3 lines of code:

import Cookies from 'js.cookie';
window.Cookies = Cookies;

import "./gems.js.erb"

The first 2 lines are to make js.cookie available.
The ./gems.js.erb is a link to a file and this file has to be created.

The new create file javascript/packs/gems.js.erb has the following content:

import {} from '<%= File.join(File.join(Gem.loaded_specs["cookies_eu"].full_gem_path, "app", "assets", "javascripts", "cookies_eu.js")) %>'

Tips:

• follow the [Webpacker] Compiling..... in the logfile and see if there are any errors.
• javascript/packs/hello_erb.js.erb is created but can be removed.

Final thoughts:

At the end of the day, i realized this gem is not what i needed.
Cookies is wel supported in rails, so i used the general idea to rewrite the gem in a "jip and janneke" version.
So i do not have to use the gem in my project anymore.

[sbilharz]

yarn add js.cookie
in application.js
import Cookies from 'js.cookie';
window.Cookies = Cookies;

Please note that there is a subtle bug in here. While the js.cookie package has an almost identical API and no error is thrown the way it is used by cookies_eu.js, it is not the package actually used by the original code! In fact, the cookies_eu_consented cookie is created as a session cookie if you do it like proposed by @rkiller because at the end of the day there is a difference between the APIs. The correct package to import is called js-cookie - with a dash, not a dot.

So the right steps are:
yarn add js-cookie
and in application.js (or gems.js.erb if you created it like recommended above)

import Cookies from 'js-cookie';
window.Cookies = Cookies;

[jussihirvi]

Bodatas answer does not include the css. The file gems.js.erb could be used to do that. Add this:

import '<%= File.join(File.join(Gem.loaded_specs['cookies_eu'].full_gem_path, 'app', 'assets', 'stylesheets', 'cookies_eu.scss')) %>'