Uncaught ReferenceError: Shepherd is not defined

[borjasolerme]

After following all the steps in the Readme I got this error in my webapp: (index):924 Uncaught ReferenceError: Shepherd is not defined
This is my abraham.yml file:

defaults: &defaults
  # Add any valid Shepherd.js configuration JSON here
  # and it will be passed into the `new Shepherd.Tour()`
  # initializer.
  :tour_options: '{ defaultStepOptions: { classes: "theme-default" } }'

development:
  <<: *defaults

test:
  <<: *defaults

production:
  <<: *defaults

All the rest, tours structure is the same as the views and I have required css and js Abraham files.

This is the gem I have in my gemfile.lock: abraham (2.1.1)

I am using ruby 2.7 and rails 6.0

[markhallen]

Hi @borjasolerr I had similar issues when upgrading from Rails 5 and Sprockets to Rails 6 and Webpacker.

The quick fix is to expose Shepherd and Cookie. You can add this to the bottom of app/javascript/packs/abraham.js

import Shepherd from 'shepherd.js';
window.Shepherd = Shepherd;
import Cookies from 'js-cookie/src/js.cookie';
window.Cookies = Cookies;

Shepherd and Cookies should then be available to the client-side js.

[jabbett]

If either of you have advice on how to make this work better out of the box, please let me know!

[prschmid]

I know this thread is closed, but I believe the root cause of the issue is how Rails 6 handles JS files from gems. Here is a discussion on the topic: https://github.com/rails/webpacker/issues/57

[deepakmahakale]

FYI, if anyone else stumbles upon this

rails 6.1.1

I made it work by copying the abraham/index.js and making the following changes to it:

// app/javascript/packs/abraham.js

import Shepherd from 'shepherd.js';
window.Shepherd = Shepherd;
import Cookies from 'js-cookie/src/js.cookie';
window.Cookies = Cookies;

let Abraham = new Object();
window.Abraham = Abraham;

// rest of the code as it is ....

// app/javascript/packs/application.js

require("packs/abraham.js");

Not sure if this is good but it works 🤷‍♂️