Closed D4RKAR117 closed 6 years ago
I'm not familiar with Laravel, or how it works with 3rd party libraries/dependencies.
If you're using npm
in your project, I'd guess you‘ll want something like:
$ npm i scrollreveal@beta --save
const ScrollReveal = require("scrollreveal");
ScrollReveal().reveal('.top-reveal', { ... });
ScrollReveal().reveal('.right-reveal', { ... });
// etc...
Also, when you're using <script>
tags (CDN), are there any errors in the console?
It’s possible your script is attempting to use window.ScrollReveal
before it has loaded.
Thanks for responding quickly.
First I want to confirm that Laravel effectively uses npm
as a dependency manager, as explained in this link, mix imports of external JS libraries should go in the file /resources/assets/js/app.js
, so that later Webpack camn compile and minify the code inside the deployment folder public/js/app.js
.
I tried what you suggested earlier by applying your response and the Laravel documentation for the use of external JS libraries as follows:
This is my assets
app.js file
and as you suggested try adding:
const ScrollReveal = require("scrollreveal");
into the file.
This is my custom script where I applied the other part of your suggestion
and finally, again here is my view where to use both my custom script and the deployment
app.js
(Remember that in theory when you import a library inside the asset app.js
, deployment app.js
works like the script of the imported JS library).
I removed the CDN from the view, later in the display of my page look for errors in the console as you suggested, but this error is new, it did not appear when I tried to use the CDN or the local script: ScrollReveal.js
or ScrollReveal.min.js
I appreciate your help enormously, I hope you can help me with this problem, and that this could be a contribution for future versions of this incredible JavaScript library.
ScrollReveal is not defined when/where you're trying to use it.
Notice how for Vue, you are assigning to the global object, e.g:
// app.js
window.Vue = require('vue');
This makes Vue
a global variable. I would guess you either need to do the same for ScrollReveal, e.g:
// app.js
window.ScrollReveal = require('scrollreveal');
...OR require scrollreveal
in the same file where you intend to use it, e.g:
// webAni.js
const ScrollReveal = require("scrollreveal");
ScrollReveal().reveal('.top-reveal', { ... });
ScrollReveal().reveal('.right-reveal', { ... });
ok I just tried your new suggestions as follows:
this is my resources/assets/js/app.js
i added
window.ScrollReveal = require('scrollreveal');
first without any another modification, it doesn’t work and the console still trows the undefined error.
After that i tried add the Laravel default format to package as shown in the previous screenshot with the require('../../../node_modules/scrollreveal');
, it doesn’t affect in anything.
last i tried add to the public/js/webAni.js
the line const ScrollReveal = require("scrollreveal");
and then this happen in the console.
another kind of error.
But trying to validate the code using the visual studio code, I found the following regarding the ScrollReveal package.
The translation of the message says:
No declaration file was found for the 'scrollreveal' module. '/home/d4rkar117/GitRepos/DatacenterWeb/node_modules/scrollreveal/dist/scrollreveal.js' has an implicit "any" type.
Try "npm install @ types / scrollreveal" if it exists or add a new declaration file (.d.ts) that includes "declare module 'scrollreveal';"
that note appears with or without require('../../../node_modules/scrollreveal');
, idk if this message has any kind of relevance in this case but ill wait for your comments.
You should not be responsible for locating node package file paths, e.g:
require('../../../node_modules/scrollreveal');
you should only need to pass the package name, e.g:
require('scrollreveal');
From the ReferenceError: require is not defined
inside webAni.js
, it’s clear that you should only be using require()
inside of app.js
, so I still believe that this is correct:
// app.js
window.ScrollReveal = require('scrollreveal');
Also this...
No declaration file was found for the 'scrollreveal' module... Try
npm install @types/scrollreveal
if it exists or add a new declaration file (.d.ts) that includesdeclare module 'scrollreveal';
I don’t think the missing type definitions error message matters, unless you’re using TypeScript.
If you’re getting ReferenceError: ScrollReveal is not defined
from your webAni.js
script, I would guess it’s the order in which your scripts are loaded/executed. This doesn’t appear to be a ScrollReveal problem, but a question of how to get 3rd party scripts working with Laravel.
I did notice however, that you’re using the defer
attribute on your app.js
script tag.
defer
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing
DOMContentLoaded
. Scripts with the defer attribute will prevent theDOMContentLoaded
event from firing until the script has loaded and finished evaluating.— MDN
I'm not sure, but this could be why your webAni.js
may be evaluated before the app.js
has had a chance to execute. Sounds like you want to wait for the DOMContentLoaded
event before attempting to use ScrollReveal (or any of your 3rd party scripts).
I would recommend checking with the Laravel community on script execution order, or exploring the use of DOMContentLoaded
event listeners inside your webAni.js
file.
Ok, finally after hours experimenting and thanks to your last suggestion, I successfully managed to set up your wonderful library. I will explain how I did it with the hope that you add this to your documentation and the clarification of my final doubt, after this you can terminate this issue.
First, the defer attribute in the Githubissues.
I'm trying to use ScrollReveal v3.4.0 in my Laravel web page, but the animations never start, later I install v4.0.0-beta.32 hoping that will help me, but the animations never start. Idk if im doing anything wrong but I cant find any example of usage with Laravel
that its my custom script, i follow all available documentation.
I would appreciate a guide or how to use scrollreveal with laravel, including its implementations of webpack.
Thanks, Ill waiting for your answer!