I've come to the community to ask for help since I have been facing this problem for the last few days and can't seem to find any answers on the topic.
I've just converted my fully working HTML (with scripts) to React and everything seems to work apart from the scripts. I've tried loading them in the main index.html, as helmets, in the JS page itself, and nothing seems to work. Currently this is what my code looks like [IN THE INDEX.HTML FILE]
```<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="../src/pageScript.js" async defer></script>
<script src="../js/scripts.min.js" async defer></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" async defer></script>
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.key === "Escape") {
$('.modal').removeClass('modal-show');
$('.content').removeClass('content-blurred');
$('body').removeClass('no-scroll');
}
});
$(function(){
// Provider card slider
$('.slider').flickity({
pauseAutoPlayOnHover: false,
prevNextButtons: false,
cellAlign: 'center',
draggable: false,
freeScroll: false,
wrapAround: true,
pageDots: false,
autoPlay: 3000,
});
// Imbox zero slider
$('.zero-slider').flickity({
pauseAutoPlayOnHover: false,
prevNextButtons: false,
cellAlign: 'center',
freeScroll: false,
wrapAround: false,
draggable: false,
pageDots: false,
autoPlay: 3000,
fade: true,
});
// Open & close modal
$('.modal-toggle').click(function(){
$('.modal').toggleClass('modal-show');
$('.content').toggleClass('content-blurred');
$('body').toggleClass('no-scroll');
});
// Reserve username form
$(".form").submit(function(e) {
e.preventDefault();
var $form = $(this);
$.post($form.attr("action"), $form.serialize()).then(function() {
$('.form-content').addClass('form-content-hide');
$('.success').addClass('success-show');
});
});
// Save user's first name
$(".form").submit(function(e) {
e.preventDefault();
var value = $("#firstName").val();
$('.first-name').text("Thank you," + " " + value + "!");
});
// Feather icons
feather.replace()
// ScrollReveal
ScrollReveal().reveal('.hero, .title, .screen, .features, .cards, .zero-slider', {
distance: '40px',
duration: 2000,
mobile: false,
reset: false,
opacity: 0
});
});
</script>
</body>```
In my website console, I get the errors: Uncaught SyntaxError: Unexpected token '<' (at pageScript.js:1:1)
&
scripts.min.js:1 Uncaught SyntaxError: Unexpected token '<' (at scripts.min.js:1:1)
&
Uncaught ReferenceError: $ is not defined
Any support will be greatly appreciated!
