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, Jul 07 '17 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, Jul 10 '17 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, Jul 10 '17 at 12:30
@HemaNandagopal its there. Hmm. Also, I failed to mention I installed jquery through npm. — Macho Gwapito, Jul 11 '17 at 02:45
Have you installed it globally ? instead of import $ from 'jquery'; window.jQuery = $; window.$ = $; try var $ = require ('jquery') ; — Hema Nandagopal, Jul 12 '17 at 08:18

score 0 · Answer 1 · answered Jul 07 '17 at 19:22

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 07 '17 at 19:22

ideaboxer

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)? – Macho Gwapito Jul 11 '17 at 02:47
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? – ideaboxer Jul 11 '17 at 16:44

1 Answers1