How to use external js files in index.html React

Question

I am using an HTML template, which I converted to React by placing the assets folder into public (in React). I put the both the css files link and js scripts to public index.html (see code below). The css is displayed properly, however, the javascript functions aren't working. I tried installing jquery, but it still doesn't work.

I tried to put the js files into the src files and import it in the App.js file as: import './js/main.js'. This also doesn't work and logs errors such as: Expected an assignment or function call and instead saw an expression and 'jquery' is not defined.

Index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link href="%PUBLIC_URL%/assets/css/main.css" rel="stylesheet">  
  <link href="%PUBLIC_URL%/assets/css/fontawesome-all.min.css" rel="stylesheet">  
  <link href="%PUBLIC_URL%/assets/css/noscript.css" rel="stylesheet"> 

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="%PUBLIC_URL%/assets/js/jquery.min.js"></script>
    <script src="%PUBLIC_URL%/assets/js/jquery.scrollex.min.js"></script>
    <script src="%PUBLIC_URL%/assets/js/browser.min.js"></script>
    <script src="%PUBLIC_URL%/assets/js/breakpoints.min.js"></script>
    <script src="%PUBLIC_URL%/assets/js/util.js"></script>
    <script src="%PUBLIC_URL%/assets/js/main.js"></script>
  </body>
</html>

Does anyone know why the js files aren't working? Any help would be highly appreciated.

Thanks in advance!

k-wasilewski · Accepted Answer · 2021-02-21 17:03:35Z

1

Try to put your scripts inside index.html's head tag, or just use npm i jquery --save and then import $ from 'jquery'.

answered Feb 21, 2021 at 17:03

k-wasilewski

4,6914 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nina Over a year ago

Thanks for your answer! I tried all of the things you suggested. It solved the jquery is not defined error and to solve the Expected an assignment or function call error I used /* eslint-disable */, so now I don't get any errors anymore but the javascript animations for the site still don't work. Do you know any other way to include javascript files into React?

k-wasilewski Over a year ago

For me, always putting the script inside the head works... so it must be a React issue. These animations - maybe they collide with the way React works? I'd appreciate a +1 if my answer helped :)

Collectives™ on Stack Overflow

How to use external js files in index.html React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related