Uncaught ReferenceError: Shepherd is not defined
borjasolerme opened this issue ยท 4 comments
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
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.
If either of you have advice on how to make this work better out of the box, please let me know!
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: rails/webpacker#57
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 ๐คทโโ๏ธ