question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot configure Webpack

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:16

github_iconTop GitHub Comments

3reactions
Deewaicommented, Aug 15, 2019

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

2reactions
hashharvestcommented, May 7, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot configure webpack 2.2.1 correctly, keep throwing ...
Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property ' ...
Read more >
Configuration - webpack
dev is an online tool for creating custom webpack configurations. It allows you to select various features that will be combined and added...
Read more >
How to configure webpack to fix "Can't resolve 'module' from ...
I'm having a hard time to run babel-plugin-macros with a storybook, it seems I need to configure the webpack: I asked the same...
Read more >
Custom Webpack Config - Next.js
The webpack function is executed twice, once for the server and once for the client. This allows you to distinguish between client and...
Read more >
A Guide to Managing Webpack Dependencies - Toptal
If we want to include modules from externally hosted scripts, we need to define them in the configuration. Otherwise, Webpack cannot generate the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found