Cannot configure Webpack
See original GitHub issueIn 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:
- Created 6 years ago
- Comments:16
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
andjquery
:npm i bootstrap3
npm i jquery
Then, edit your
webpack.config.js
, add the following (I placed mine as the last item inplugins
, 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.