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.

[unrevised6419]

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. :)