How to import external javascript (which requires jquery) in reactjs

Question

First of all I'm still a newbie in web development. Okay, now to the question. I have these imports:

import $ from 'jquery'; 
window.jQuery = $;
window.$ = $;
global.jQuery = $;
import './assets/js/waves';

How do I properly import an external javascript to reactjs if my external javascript requires jquery?

Because based on what these guys have said:

reactjs, bootstrap and npm import - jQuery is not defined

Are ES6 module imports hoisted?

my imports will be hoisted, which results in my external "./assets/js/waves" js causing an error.

Uncaught ReferenceError: $ is not defined?

Thanks in advance!

How about this var $ = require('./lib/jquery.js'); window.jQuery = $; window.$ = $ — Hema Nandagopal
– Hema Nandagopal, Commented Jul 7, 2017 at 14:56
Thanks @HemaNandagopal and ArslArsl. I tried those but still did not load. Even the jquery is not loading. What could I be doing wrong? — Macho Gwapito
– Macho Gwapito, Commented Jul 10, 2017 at 12:05
Do you have the jquery plugin cdn or check the whether the script is there in the path which you refered, — Hema Nandagopal
– Hema Nandagopal, Commented Jul 10, 2017 at 12:30

alpinist · Accepted Answer · 2017-07-07 19:22:25Z

0

import * as jQuery from 'jquery';

Then you have a reference of jQuery and you may do with it what you like, for instance:

window.$ = jQuery;

answered Jul 7, 2017 at 19:22

alpinist

4,1199 gold badges47 silver badges63 bronze badges

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

2 Comments

thanks @ideaboxer but somehow it still did not work. question, where do you think should I put this? In a component or in the parent (index)?

It must have something to do with the content of the waves.js file. Could you post (part of) its content so that we can analyze it?