react-summernote: Cannot configure Webpack

There is an easier way to solve this problem. Create a js file to include your globals //globals.js import jquery from 'jquery'; window.jQuery = jquery; window.jquery = jquery; window.$ = jquery;

then in your component js file import "../globals"; import ReactSummernote from 'react-summernote'; import 'react-summernote/dist/react-summernote.css';

If you used create-react-app and ejected, this is what I did:

Installed bootstrap3 and jquery:

npm i bootstrap3 npm i jquery

Then, edit your webpack.config.js, add the following (I placed mine as the last item in plugins, right above the closing ].filter(Boolean), for plugins… add this code:

new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }),

Where ever you use react-summernote component, I did the following (based on @Deewai suggestion). Add the imports at top:

import jquery from 'jquery'; import 'bootstrap3/js/modal'; import 'bootstrap3/js/dropdown'; import 'bootstrap3/js/tooltip'; import 'bootstrap3/dist/css/bootstrap.css';

AFTER all imports but before your function or class declaration, put the following:

window.jQuery = jquery; window.jquery = jquery; window.$ = jquery;

This allowed for react-summernote react to work for me.

Hope that helps.

I solved this by manually using bootstrap js files and jQuery. Since the problematic dropdown button generated by summernote has the class name of “dropdown-toggle”, I inserted…

import $ from "jquery"; import bootstrap/js/dropdown";

and, $(".dropdown-toggle").dropdown(); inside render()

I also noticed that dropdown won’t still work unless a re-render occurs after an action is called. In my case, initialization of form made the trick.