Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Question] Demo: Shepherd is not defined #3121

Open
Guilouf opened this issue Feb 4, 2025 · 2 comments
Open

[Question] Demo: Shepherd is not defined #3121

Guilouf opened this issue Feb 4, 2025 · 2 comments
Labels

Comments

@Guilouf
Copy link

Guilouf commented Feb 4, 2025

I'm not a power user of js, for the least. But in the the "demo", Shepherd module is imported in a script tag:
index.html

<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
<script type="module" src="shepherd.js/dist/shepherd.mjs"></script>
<script src="demoScript.js"></script>

When imported like this, there is an error in the demo script, Shepherd is not defined.

For the example to work, i had to do differently:
index.html

<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
<script type="module" src="demoScript.js"></script>

demoScript.js

import Shepherd from "shepherd.js/dist/shepherd.mjs"

const tour = new Shepherd.Tour({
		defaultStepOptions: {
			cancelIcon: {
				enabled: true
			},
			classes: 'class-1 class-2',
			scrollTo: { behavior: 'smooth', block: 'center' }
		}
	});
//........

Question are, what did I miss, and how it is supposed to work with this import:
<script type="module" src="shepherd.js/dist/shepherd.mjs"></script> ?
I think a jsfiddle would be much more didactic than the current demo page.

@RobbieTheWagner
Copy link
Member

@Guilouf I'm sorry you are having issues! The way you import depends on your project. If you are using build tools or frameworks of some kind then import Shepherd from "shepherd.js/dist/shepherd.mjs" in the JS file should work.

If you are trying to just load an HTML file and not using any tooling, you will need to point the src to wherever the Shepherd files live.

@Guilouf
Copy link
Author

Guilouf commented Feb 6, 2025

@RobbieTheWagner Thanks for the answer, but using a framework or not i still need to use the import Shepherd from "shepherd.js/dist/shepherd.mjs" style, i just can't see in which context i would need to use the <script type="module" src="shepherd.js/dist/shepherd.mjs"></script> import style to load the lib.

I don't have any js framework installed in my website, I use just vanilla Js just like in your demo. I successfully installed and used your lib, but your demo website is mentioning the script include that didn't work, at least for me, and not the ESN import, as you can see:

Image

In which context the <script type="module" src="shepherd.js/dist/shepherd.mjs"></script> import would be usefull for this lib ? I'm not sure this is how it's supposed to work.

Maybe it's better with example ?
This is not working, and from your demo code: https://jsfiddle.net/fxng8ujm/
This is working, because of the changes I made: https://jsfiddle.net/gwme9jb5/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants