scrollreveal.min.js error, only on index page of website

Question

I have been looking at different forums that include this error and trying different things that I have read to get rid of this error. I have tried removing any duplicate libraries, and changing the order in which they appear, but nothing has seemed to worked for me. I am using a bootstrap theme

scrollreveal.min.js:1 Uncaught TypeError: Cannot set property 'sequence' of 
undefined
 at e.reveal (scrollreveal.min.js:1)
 at jquery.js:53
 at jquery.js:75

I am not sure what to do to get rid of it, any help would be great. Thanks in advance.

Below is what I have in the head section

  <!-- Bootstrap core CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>

  <!-- Plugin CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="./css/creative.min.css" rel="stylesheet">
  <link href="./css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

And this is what I have at the end of the body.

<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/3.3.6/scrollreveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

**1)** Are those the same for the index page **and** the other pages? What could be different? **2)** Is `js/jquery.js` another jQuery library or really a custom JS strangely named? — Louys Patrice Bessette, Jan 12 '18 at 18:54
@LouysPatriceBessette yea they are. That is a custom js file — OL12_9, Jan 12 '18 at 18:55
Is that possible that you instantiate `scrollReveal` on an element that is not present on the buggy page, in your custom JS files? — Louys Patrice Bessette, Jan 12 '18 at 18:59
@LouysPatriceBessette No, it is on the index page. This is my bootstrap - https://blackrockdigital.github.io/startbootstrap-creative/ and currently the phone and envelope are not appearing — OL12_9, Jan 12 '18 at 19:02
Is there errors in [the console](https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers/77337#77337)? — Louys Patrice Bessette, Jan 12 '18 at 19:07
@LouysPatriceBessette Yes the error above is shown in the console — OL12_9, Jan 12 '18 at 19:07
okay... So nothing else. mmm Do you have a live link to provide here? — Louys Patrice Bessette, Jan 12 '18 at 19:08
@LouysPatriceBessette It is for uni and don't want to send it publicly over the internet. Do you have discord? — OL12_9, Jan 12 '18 at 19:10
@LouysPatriceBessette it is a working progress, so some links may not work. Just to let you know :) — OL12_9, Jan 12 '18 at 19:14
On line#75 of jquery.js, try to replace `})(jQuery); // End of use strict` by `}); // End of use strict` — Louys Patrice Bessette, Jan 12 '18 at 19:18
@LouysPatriceBessette still getting the same error, I am working off the link I gave you so you will be able to see the up to date version — OL12_9, Jan 12 '18 at 19:22
@LouysPatriceBessette its the same error for me, strange! Will try in a diffrerent browser. Line 175 is var length = requiredLength - str.length; what do I change on this line? Deleted (jquery) from line 82 — OL12_9, Jan 12 '18 at 19:25
@LouysPatriceBessette Yea, cleared the cache and the error updated and then realised what the errors meant :) Thank you so much for your help!!! — OL12_9, Jan 12 '18 at 19:30
Explanations about your issue can be read in [**this detailled SO answer**](https://stackoverflow.com/a/4472589/2159528) It was not an easy one to find... In the future, look what is on the line where the error fired. That is the last displayed in the "stack". — Louys Patrice Bessette, Jan 12 '18 at 19:32
I made an answer... So the error you had may be found by others and they could have something to look at in their code. Please [accept the answer](https://stackoverflow.com/help/someone-answers) ;) — Louys Patrice Bessette, Jan 12 '18 at 19:46

score 1 · Accepted Answer · answered Jan 12 '18 at 19:40

The error is not "self explanatory"...

But the line where the error fired, line #75 of jquery.js (A custom JS file, not the library), was containing a closure syntax: })(jQuery); that was not needed.

Replacing it by }); fixed the issue for that line.

Then, the same issue fired on 3 other lines... But after those lines also fixed, the page worked as expected without error.

"Closure" itself is already well explained in this SO answer.

scrollreveal.min.js error, only on index page of website

1 Answers1