Import external script with jQuery to React JS

Question

I want to include an external Javascript(with jQuery) to reactjs.

I did take a look to this, but there are still some error.

I have a external JS file, called external.js:

$(document).ready(function() {
    document.addEventListener("deviceready", onDeviceReady, 
});


function onDeviceReady() {
    console.log("The device is ready");
}

In index.html, i add the <script src="external.js"></script> to the script:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <script src="external.js"></script>
    <div id="root"></div>
  </body>
</html>

Inside the React js project, I added the following code to App.js:

import * as jQuery from 'jquery';
window.$ = jQuery;

However, when I run the reactJS project with command npm start, inside the console, it shows

external.js:1 Uncaught ReferenceError: $ is not defined

What should I do in order to include the external js file and also the jQuery?

Which one of them depends on the other one? I am guessing index.js is your root script? If so, I would like you to add a script tag, and reference to this script, and make sure that it comes before the external.js script element. — orabis
– orabis, Commented Jan 8, 2018 at 7:54

Alexander Elgin · Accepted Answer · 2018-01-08 07:15:34Z

1

Your external script is executed before the statement window.$ = jQuery. Try to include the jQuery (before the inclusion of the external script) like you included the external script

answered Jan 8, 2018 at 7:15

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Import external script with jQuery to React JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related