Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Using
Laravel 5.6.29
with
laravel-mix@2.1.11
&
webpack@3.12.0
.
After installing
scrollreveal@3.4.0
via
npm i scrollreveal
and requiring it in my
app.js
with
require('scrollreveal')
, I see that in my
app.js
output that
ScrollReveal
is there to be found.
However, when I try to initiate it with
window.sr = ScrollReveal();
it throws me an error:
ReferenceError: ScrollReveal is not defined
, even though the reference comes after the definition.
I tried it with two different ways. First is to:
resources/assets/js/app.js
require('scrollreveal');
window.sr = ScrollReveal();
or the second way which is:
resources/views/index.blade.php
<script type="text/javascript" src="{{ mix('/js/app.js') }}"></script>
<script type="text/javascript">
window.sr = ScrollReveal();
</script>
However, if I just include the js the traditional way:
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
and then make a call to ScrollReveal(), it actually works.
Perhaps it's somehow a scope problem? But why would it only appear with ScrollReveal and not any other libraries I use? And isn't NodeJS require() function importing to global scope?
UPDATE: Third way I found that fixes this problem is by changing resources/assets/js/app.js and adding:
import ScrollReveal from 'scrollreveal';
window.sr = ScrollReveal();
will fix the issue, as this will in-scope define window.sr as ScrollReveal() using ES6 import (appearantly).
However, why wouldn't NodeJS require work still?
–
Made it work, in a way I don't yet know why it works (do elaborate if you know!), but it works.
Changing resources/assets/js/app.js and adding:
require('scrollreveal')().reveal('.sreveal');
fixes the issue, using the NodeJS require().
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
