Cannot configure Webpack

[sdabrutas]

In the installation instruction, configuration of Webpack is included: new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })

Since manual Webpack configuration is not allowed in create-react-app boilerplate of Facebook, I tried using... import $ from "jquery" window.$ = $; window.jQuery = $; instead. Yet still, dropdowns of buttons in the toolbar are not working. Any idea/solution for this?

[dustinkeib]

Unfortunately the only way I was able to solve this was to eject from create-react app: create-react-app run eject

then add the following to config/webpack.config.dev.js in the plugins array

plugins:  [
  // place this at the bottom of the array..
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  }) 
],

I'd be interested if you find a better way. Cheers!

[sdabrutas]

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.

[siriwatknp]

@sandddyyyy from your first comment, where did u include these line?

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

I add these lines to index.js with fresh create-react-app but I got error TypeError: $node.attr(...).tooltip is not a function

[sdabrutas]

@siriwatknp just below import statements, before class declaration.

[andrewhl]

I'm trying the same thing. I get the following error:

Line 6:  Import in body of module; reorder to top  import/first

My code is:

import React, { Component } from 'react';
import $ from "jquery";
import "bootstrap/js/dropdown";
window.$ = $;
window.jQuery = $;
import ReactSummernote from 'react-summernote';
import 'react-summernote/dist/react-summernote.css';
import 'react-summernote/lang/summernote-ru-RU';

If I move the window statements below the imports, I get:

Reference Error
Object../node_modules/bootstrap/js/dropdown.js
node_modules/bootstrap/js/dropdown.js:165
  162 |     .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
  163 |     .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
  164 | 
> 165 | }(jQuery);

I've tried importing jquery via a CDN link in my index.html, but I get:

TypeError: Cannot read property 'lang' of undefined
  1 | (function ($) {
> 2 |   $.extend($.summernote.lang, {
  3 |     'ru-RU': {
  4 |       font: {
  5 |         bold: 'Полужирный',

Here's my CDN link:

    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

[trickmeyer]

@andrewhl if you don't need russian language support remove that import:

import 'react-summernote/lang/summernote-ru-RU';

i noticed some issues with that particular line. then just remove the language config setting from the component as well.

[iamandrewluca]

This is how I import jquery, bootstrap and popper in CRA. Need to install exports-loader.
Usually I do this in index.js if more components require them

import jQuery from 'jquery/dist/jquery.slim';
import Popper from 'popper.js';

window.$ = window.jQuery = jQuery;
window.Popper = Popper;

window.Util = require('exports-loader?Util!bootstrap/js/dist/util'); // eslint-disable-line
window.Dropdown = require('exports-loader?Dropdown!bootstrap/js/dist/dropdown'); // eslint-disable-line
window.Modal = require('exports-loader?Modal!bootstrap/js/dist/modal'); // eslint-disable-line

[alexxxcs1]

@dustinkeib I try your proposal to solve error ( TypeError: $node.attr(...).tooltip is not a function ) but it not work , I find there is a default code in ' webpack.config.dev.js ' : 'new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),'

I think maybe is this code cause your proposal can't work ? do you have other way to solve this error ?

[phil-a]

@sandddyyyy What do you mean by:

initialization of form made the trick

[sdabrutas]

@phil-a if you are familiar with the behavior of React, you should have known that a component renders initially once. Unless you trigger a change in props or state (or your shouldComponentUpdate returns true), it won't re-render. In my solution (if you want to call this 'hack' as a workaround for this bug), I added a jQuery function to 'activate' dropdown functionality. However, it won't take effect unless the component re-render. Since I am using redux-form for my forms, initialization of values in the form triggers re-rendering of component, thus making the dropdown to be activated and ready to be used. Well, that is my hypothesis after my investigation. I hope this will help.

[sdabrutas]

To anyone who used create-react-app tool to generate their boilerplate and encounter this issue, there's already a better workaround for this without ejecting your app and all these "hacks". Please see react-app-rewired. With this, you can conveniently configure your webpack. Just be cautious as instructed in their README and disclaimer.

[dpatra]

@sandddyyyy how to add jquery using react-app-rewired ?

[Deewai]

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';

[sheosagar]

@Deewai, Thanks, it's work for me. :)

[rb162215]

@dustinkeib I try your proposal to solve error ( TypeError: $node.attr(...).tooltip is not a function ) but it not work , I find there is a default code in ' webpack.config.dev.js ' : 'new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),'

I think maybe is this code cause your proposal can't work ? do you have other way to solve this error ?

i am facing same issue, did you found solution on this?

[hashharvest]

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.

[danielpitol]

The @Deewai solution worked for me, with a detail:

Create a js file to include your globals //globals.js import jquery from 'jquery'; import 'bootstrap' 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';