javascriptjqueryreactjstrumbowyg

React: Add jquery needed by another library

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.

Solution

  • 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.