Problem: while developing using Electron, when you try to use any JS plugin that requires jQuery, the plugin doesn't find jQuery, even if you load in the correct path using script tags.
For example,
<body> <p id="click-me">Click me!</p> ... <script src="node_modules/jquery/dist/jquery.min.js"></script> //jQuery should be loaded now <script>$("#click-me").click(() => {alert("Clicked")});</script> </body>
Running this code above wouldn't work. In fact, open up DevTools, go to the Console view, and click on the <p>
element. You should see that function $ is not defined
or something to that effect.
Problem: while developing using Electron, when you try to use any JS plugin that requires jQuery, the plugin doesn't find jQuery, even if you load in the correct path using script tags. Running this code above wouldn't work.
One of the best front-end frameworks in the web world in twitter bootstrap. As electron is relies on web browser, we can easily use bootstrap with electron in order to use the power of bootstrap in our electron framework. The latest version of bootstrap as of today is 3.3.
Electron node integration refers to the ability of accessing Node. js resources from within the “renderer” thread (the UI). It is enabled by default in Quasar CLI, although Electron is encouraging developers to turn it off as a security precaution.
A better and more generic solution IMO:
<!-- Insert this line above script imports --> <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> <!-- normal script imports etc --> <script src="scripts/jquery.min.js"></script> <script src="scripts/vendor.js"></script> <!-- Insert this line after script imports --> <script>if (window.module) module = window.module;</script>
Benefits
node-integration
to be falsesource here
As seen in https://github.com/atom/electron/issues/254 the problem is caused because of this code:
if ( typeof module === "object" && typeof module.exports === "object" ) { // set jQuery in `module` } else { // set jQuery in `window` }
The jQuery code "sees" that its running in a CommonJS environment and ignores window
.
The solution is really easy, instead of loading jQuery through <script src="...">
, you should load like this:
<script>window.$ = window.jQuery = require('./path/to/jquery');</script>
Note: the dot before the path is required, since it indicates that it's the current directory. Also, remember to load jQuery before loading any other plugin that depends on it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With