How to add the: "Cookies EU banner" to Rails 6 site

I am trying to add this: https://github.com/Alex-D/Cookies-EU-banner to my rails 6 site. It ought to be easy, but there is something I have missed, and I can not figure out, what it is.

This is what I have done:

yarn add cookies-eu-banner (no problem).
insert this div at the beginning of the body part (no problem - done with a partial).

<div id="cookies-eu-banner" style="display: none;">
    By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.
    <a href="./read-more.html" id="cookies-eu-more">Read more</a>
    <button id="cookies-eu-reject">Reject</button>
    <button id="cookies-eu-accept">Accept</button>
</div>

insert this div just before the end of the body part (also done with a partial).

<%= javascript_pack_tag '../src/cookies-eu-banner' %>
<script>
    new CookiesEuBanner(function () {
        // Your code to launch when user accept cookies
    });
</script>

in application.js I have added this line: import('src/index')
in app/javascript/src/index.js I have added this line: import 'cookies-eu-banner'
I have copied the cookies-eu-banner.js script to the app/javascript/src folder.
Then precompiled assets, done bin/webpack and restarted the server.

However on refreshing the page, I still get either an errormessage saying that: "CookiesEuBanner is not a function", or: "Uncaught ReferenceError: cookiesEuBanner is not defined"

Any suggestions to what I have missed are more than welcome.

Thanks in advance

Solution

To make this work with webpack/Webpacker, usage will be different than what's currently described in the cookies-eu-banner README. Your JavaScript code must be imported in the webpack dependency graph instead of embedding JS in <script> tags in the view.

First, make sure that following tags are in your layout to import Webpacker-bundled JavaScript and CSS:

<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>

The banner HTML should be in your layout/view, i.e., <div id="cookies-eu-banner" style="display: none;">...</div> per the README.

Then, add a JS file for initializing the banner somewhere in app/javascript/, (but not in app/javascript/packs), like app/javascript/src/add-eu-banner.js. Here, you'll import the library (and default css if desired) and initialize it when the DOM content has loaded:

// app/javascript/src/add-eu-banner.js

import CookiesEuBanner from 'cookies-eu-banner'
import 'cookies-eu-banner/css/cookies-eu-banner.default.css'

document.addEventListener('DOMContentLoaded', () => {
  new CookiesEuBanner(() => {
    console.log('Cookies EU Banner accepted')
  })
})

Now, add that file to the webpack dependency graph by adding an import statement in the "application.js" pack file:

// app/javascript/packs/application.js

import '../src/add-eu-banner'

That should display the banner. You might need to refresh the page or restart the webpack-dev-server depending on how you're developing locally.

I also created this as an example in a branch in my Rails 6 Webpacker demo repo: https://github.com/rossta/rails6-webpacker-demo/compare/example/cookies-eu-banner