React: Add jquery needed by another library

Question

I want to use the library Trumbowyg in my react project. But the problem is the library throws error jQuery is not defined.

I found info that jquery must be somehow exposed to window as global variable. Authors of the library provide example with Webpack but I don't have this in my project.

So I've installed jquery through npm install and tried to import it and set to the window variable like this (it didn't work):

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

How can I setup jquery so that trumbowyg sees it? I've created my project with create-react-app command if it can help you.

I would not recommend using a library like that. It wraps jQuery within a react component. There are many WYSIWYG editors for react. — Phiter
– Phiter, Commented Nov 5, 2018 at 17:25
sounds like a bug on their end. their package.json should include a peerDependency on jquery. you could also simply add it to your DOM directly using the jquery CDN URL. — Derek
– Derek, Commented Nov 5, 2018 at 17:33
React and jQuery have completely different paradigms and are rarely compatible. If you are forced to use it, you will probably need to use componentDidMount and several hacks in the React side to allow jQuery work without interferences from React. For jQuery importing problem: Webpack but I don't have this in my project: What do you use to pack src files? — emi
– emi, Commented Nov 5, 2018 at 17:33

Bhojendra Rauniyar · Accepted Answer · 2018-11-05 17:46:55Z

2

As others commented, you should choose other library which don't use jQuery. But if you still want to use then you can do like the following:

import jquery from 'jquery'
import Trumbowyg from 'react-trumbowyg';
...
componentDidMount() { // hook the jQuery when component is mounted
  window.$ = window.jQuery = jquery;
}
render() {
  return <Trumbowyg id='react-trumbowyg'/>
}

If this still not working, then require the plugin.

edited Nov 5, 2018 at 17:46

answered Nov 5, 2018 at 17:40

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

1 Comment

nllsdfx Over a year ago

thanks, I've decided to use another library as others commented

Collectives™ on Stack Overflow

React: Add jquery needed by another library

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related