Javascript file is not working as intended in React

Question

I am creating a website using a template of https://bootstrapmade.com/arsha-free-bootstrap-html-template-corporate/ and using react to render it but it is not rendering properly like loading spinner is keep spinning, swipers are not working and those functionalities are related to javascript files. I also have included it correctly in reacts index.html fileg perfect because included css file is running. It is running perfectly without react so please help me solve this issue.Please again...

I have tried both relative path and absolute path linkingenter image description here

<script src="%PUBLIC_URL%/assets/vendor/aos/aos.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="%PUBLIC_URL%/assets/vendor/php-email-form/validate.js"></script>

<!-- Template Main JS File -->
<script src="%PUBLIC_URL%/assets/js/main.js"></script>

Answer 1

I encountered that issue today, even came here to recognize the answer but find none.

I managed to recognize the issue which seems to be specific, not a general solution.

My js scripts were written like below:

$('.scroll-top').on('click', function () {
    $('html, body').animate({ scrollTop: 0 }, 75);
  });

So, I re-wrote the event like below:

$(document).on("click", ".scroll-top", function () {
    $("html, body").animate({ scrollTop: 0 }, 75);
  });

That should work. What I recognized is that those imported scripts are not running in order because of the kind of scripts in them. So, you have to access the events from the document object.

Let me know if that solves your issue.