Electron: jQuery is not defined
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.
jquery electron
edited Aug 31 '18 at 22:20
Pranav A.
1211216
asked Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
add a comment |
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.
jquery electron
edited Aug 31 '18 at 22:20
Pranav A.
1211216
asked Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
Try loading the jQuery from one of the online repositories (Google, Amazon) and provide the code in here. Without the code there's little anyone can help you with.
– YePhIcK
Sep 17 '15 at 3:16
Hey, I posted this question so I could answer it myself, but as soon as I can I'll add some code to make the question more complete.
– Bruno Vaz
Sep 17 '15 at 19:43
Why not just use the Electronrequirefunction?
– Will Hoskings
Sep 8 '18 at 14:28
add a comment |
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.
jquery electron
edited Aug 31 '18 at 22:20
Pranav A.
1211216
asked Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
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.
jquery electron
jquery electron
edited Aug 31 '18 at 22:20
Pranav A.
1211216
asked Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
edited Aug 31 '18 at 22:20
Pranav A.
1211216
asked Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
edited Aug 31 '18 at 22:20
Pranav A.
1211216
edited Aug 31 '18 at 22:20
Pranav A.
1211216
edited Aug 31 '18 at 22:20
Pranav A.
1211216
1211216
asked Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
asked Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
asked Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
2,40341024
Try loading the jQuery from one of the online repositories (Google, Amazon) and provide the code in here. Without the code there's little anyone can help you with.
– YePhIcK
Sep 17 '15 at 3:16
Hey, I posted this question so I could answer it myself, but as soon as I can I'll add some code to make the question more complete.
– Bruno Vaz
Sep 17 '15 at 19:43
Why not just use the Electronrequirefunction?
– Will Hoskings
Sep 8 '18 at 14:28
add a comment |
Try loading the jQuery from one of the online repositories (Google, Amazon) and provide the code in here. Without the code there's little anyone can help you with.
– YePhIcK
Sep 17 '15 at 3:16
Hey, I posted this question so I could answer it myself, but as soon as I can I'll add some code to make the question more complete.
– Bruno Vaz
Sep 17 '15 at 19:43
Why not just use the Electronrequirefunction?
– Will Hoskings
Sep 8 '18 at 14:28
Try loading the jQuery from one of the online repositories (Google, Amazon) and provide the code in here. Without the code there's little anyone can help you with.
– YePhIcK
Sep 17 '15 at 3:16
Try loading the jQuery from one of the online repositories (Google, Amazon) and provide the code in here. Without the code there's little anyone can help you with.
– YePhIcK
Sep 17 '15 at 3:16
Hey, I posted this question so I could answer it myself, but as soon as I can I'll add some code to make the question more complete.
– Bruno Vaz
Sep 17 '15 at 19:43
Hey, I posted this question so I could answer it myself, but as soon as I can I'll add some code to make the question more complete.
– Bruno Vaz
Sep 17 '15 at 19:43
Why not just use the Electron
require function?– Will Hoskings
Sep 8 '18 at 14:28
Why not just use the Electron
require function?– Will Hoskings
Sep 8 '18 at 14:28
add a comment |
16 Answers
16
active
oldest
votes
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
- Works for both browser and electron with the same code
- Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
- Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
- Does NOT require
node-integrationto be false
source here
edited Nov 26 '18 at 11:04
codemirror
9541026
answered May 27 '16 at 10:01
Dale HardersDale Harders
6,7171914
actually this is not electron problem it is the new standard since a lot of client side libraries now is trying to support both require() and html load , anyway you can also load jquery in your app using
– Fareed Alnamrouti
Jul 20 '16 at 5:57
1
@fareednamrouti Yes, but the point of this solution was that you don't have to list the 3rd party libraries (it just works!). Handy when you are importing many libraries (or self bundled scripts)
– Dale Harders
Aug 15 '16 at 1:47
2
thanks! in my case, this solution also works for older versions of d3 like d3 v3 or below
– headwinds
Oct 5 '16 at 18:57
2
@DaleHarders It turns outwindow.modulebegins with the same value asmodule, so your code doesn't work quite as expected. The proper way to do it is to savemoduleto some other (unused) window property instead, likewindow.tempModule. To confirm what I say, tryconsole.log(module)after your last statement to verify that nowmodule === undefined.
– Lucio Paiva
Nov 5 '16 at 23:15
1
Thanks. This word for me
– Herman Demsong
Aug 8 '18 at 10:28
|
show 5 more comments
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.
edited Oct 21 '15 at 22:18
Adam Harte
8,07764479
answered Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
1
Thanks, but I have a system created by yeoman with angular. Grunt takes all my bower dependencies and build them into a vendor.js file. How can I load jquery, fix with your line, and continue with the other bower dependencies that needs jquery?
– bluesky777
Oct 7 '15 at 23:10
I don't understand, the vendor.js have jquery inside? If so, you could load the vendor.js with this window.$ method, afaik.
– Bruno Vaz
Oct 10 '15 at 2:01
Some comments later in the linked issue there is an even better solution:'node-integration': falseas option forBrowserWindow.
– Boldewyn
Dec 17 '15 at 15:55
6
Doesn't this affect other things?
– Bruno Vaz
Dec 18 '15 at 16:57
add a comment |
Another way of writing <script>window.$ = window.jQuery = require('./path/to/jquery');</script> is :
<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
answered Jan 19 '16 at 16:02
AaleksAaleks
2,80031929
add a comment |
electron FAQ answer :
http://electron.atom.io/docs/faq/
I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
Due to the Node.js integration of Electron, there are some extra
symbols inserted into the DOM like module, exports, require. This
causes problems for some libraries since they want to insert the
symbols with the same names.
To solve this, you can turn off node integration in Electron:
// In the main process.
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false } });
But if you want to keep the abilities of using Node.js and Electron
APIs, you have to rename the symbols in the page before including
other libraries:
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports; delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
answered Jul 11 '16 at 16:01
Fran6Fran6
49143
@Fran6 what can I do if I'm loading an external page? :(
– georgiosd
Dec 17 '16 at 16:36
This worked but after doing this my Electron app would not close -- that is, I could not exit the web page.
– tale852150
Aug 4 '17 at 20:13
add a comment |
Just came across this same problem
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
worked for me
answered Oct 8 '16 at 16:21
Dhaval ChauhanDhaval Chauhan
2,47611014
This is exactly what my original answer says.
– Bruno Vaz
Oct 9 '16 at 19:04
4
@BrunoVaz Sir you are manually adding Jquery, I am using npm
– Dhaval Chauhan
Oct 11 '16 at 17:28
Accepted answer works but thats way better. Thank you man
– bmavus
Oct 20 '16 at 20:03
@bmavus Yes the code looks much neater
– Dhaval Chauhan
Oct 22 '16 at 14:16
Hi how to do same with materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. something like this <script>window.Materialize = window.Materialize = require('Materialize');</script> ??? can someone help
– Makjb lh
Apr 24 '17 at 13:33
|
show 1 more comment
You can put node-integration: false inside options on BrowserWindow.
eg: window = new BrowserWindow({'node-integration': false});
edited Apr 22 '16 at 16:35
Cethy
16113
answered Jan 11 '16 at 13:02
Murilo FeresMurilo Feres
18113
4
This is good solution for users that doesn't need node integration.
– Adam Szmyd
Feb 1 '16 at 7:02
2
this doesn't work anymore
– Santiago Hernández
Aug 5 '16 at 20:26
This is awesome , perfectly works for me. Thanks @Murilo Feres. Any ways what node-integration options does?
– Ahesanali Momin
Jan 19 '17 at 11:54
3
not work @1.4, please use : let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } })
– holly
Feb 24 '17 at 3:36
add a comment |
A nice and clean solution
- Install jQuery using npm. (
npm install jquery --save) - Use it:
<script> let $ = require("jquery") </script>
edited Oct 11 '17 at 13:46
Tassu
17329
answered May 19 '17 at 8:46
adgelbfishadgelbfish
265212
add a comment |
<script>
delete window.module;
</script>
before your jquery import and you're good to go. more info here.
answered Oct 29 '17 at 1:21
Sagiv OfekSagiv Ofek
13.9k54649
add a comment |
I think i understand your struggle i solved it little bit differently.I used script loader for my js file which is including jquery.Script loader takes your js file and attaching it to top of your vendor.js file it did the magic for me.
https://www.npmjs.com/package/script-loader
after installing the script loader add this into your boot or application file.
import 'script!path/your-file.js';
answered Apr 28 '16 at 8:34
Mertcan DikenMertcan Diken
6,73911123
add a comment |
ok, here's another option, if you want a relative include...
<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
answered May 2 '17 at 20:33
aestrroaestrro
552410
add a comment |
If you are using Angular2 you can create a new js file with this code:
// jquery-electron.js
if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
window.jQuery = window.$ = module.exports;
}
and put it right after jquery path, in .angular-cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"assets/js/jquery-electron.js",
...
...
]
answered Apr 18 '18 at 10:19
MaxMax
17917
add a comment |
worked for me using the following code
var $ = require('jquery')
answered Apr 23 '18 at 6:46
Adeojo Emmanuel IMMAdeojo Emmanuel IMM
632516
add a comment |
im building and Angular App with electron, my solution was the following:
index.html
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
So Jquery gets loaded from angular.json if on browser, else if it is an electron builded app it will require module instead.
If you want to import jquery in index.html instead of importing from angular.json use the following solution:
<script src="path/to/jquery"></script>
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
answered Nov 22 '18 at 9:48
Kuza GraveKuza Grave
19118
add a comment |
1.Install jQuery using npm.
npm install jquery --save
2.
<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>
answered Jul 31 '18 at 5:51
Alexey KolotseyAlexey Kolotsey
362
add a comment |
I face the same issue and this worked for me!
Install jQuery using npm
npm i jquery
Then include jQuery in one of the following ways.
Using Script tag
<script>window.$ = window.jQuery = require('jquery');</script>
Using Babel
import $ from "jquery";
Using Webpack
var $ = require('jquery')
answered Sep 13 '18 at 4:09
Carlos AbrahamCarlos Abraham
5471618
add a comment |
This works for me.
<script languange="JavaScript">
if (typeof module === 'object') {window.module = module; module = undefined;}
</script>
Things to consider:
1) Put this in section right before </head>
2) Include Jquery.min.js or Jquery.js right before the </body> tag
edited Nov 14 '18 at 9:26
Lithilion
7111919
answered Nov 14 '18 at 6:48
Vishal GoyalVishal Goyal
213
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f32621988%2felectron-jquery-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
16 Answers
16
active
oldest
votes
16 Answers
16
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
- Works for both browser and electron with the same code
- Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
- Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
- Does NOT require
node-integrationto be false
source here
edited Nov 26 '18 at 11:04
codemirror
9541026
answered May 27 '16 at 10:01
Dale HardersDale Harders
6,7171914
actually this is not electron problem it is the new standard since a lot of client side libraries now is trying to support both require() and html load , anyway you can also load jquery in your app using
– Fareed Alnamrouti
Jul 20 '16 at 5:57
1
@fareednamrouti Yes, but the point of this solution was that you don't have to list the 3rd party libraries (it just works!). Handy when you are importing many libraries (or self bundled scripts)
– Dale Harders
Aug 15 '16 at 1:47
2
thanks! in my case, this solution also works for older versions of d3 like d3 v3 or below
– headwinds
Oct 5 '16 at 18:57
2
@DaleHarders It turns outwindow.modulebegins with the same value asmodule, so your code doesn't work quite as expected. The proper way to do it is to savemoduleto some other (unused) window property instead, likewindow.tempModule. To confirm what I say, tryconsole.log(module)after your last statement to verify that nowmodule === undefined.
– Lucio Paiva
Nov 5 '16 at 23:15
1
Thanks. This word for me
– Herman Demsong
Aug 8 '18 at 10:28
|
show 5 more comments
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
- Works for both browser and electron with the same code
- Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
- Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
- Does NOT require
node-integrationto be false
source here
edited Nov 26 '18 at 11:04
codemirror
9541026
answered May 27 '16 at 10:01
Dale HardersDale Harders
6,7171914
actually this is not electron problem it is the new standard since a lot of client side libraries now is trying to support both require() and html load , anyway you can also load jquery in your app using
– Fareed Alnamrouti
Jul 20 '16 at 5:57
1
@fareednamrouti Yes, but the point of this solution was that you don't have to list the 3rd party libraries (it just works!). Handy when you are importing many libraries (or self bundled scripts)
– Dale Harders
Aug 15 '16 at 1:47
2
thanks! in my case, this solution also works for older versions of d3 like d3 v3 or below
– headwinds
Oct 5 '16 at 18:57
2
@DaleHarders It turns outwindow.modulebegins with the same value asmodule, so your code doesn't work quite as expected. The proper way to do it is to savemoduleto some other (unused) window property instead, likewindow.tempModule. To confirm what I say, tryconsole.log(module)after your last statement to verify that nowmodule === undefined.
– Lucio Paiva
Nov 5 '16 at 23:15
1
Thanks. This word for me
– Herman Demsong
Aug 8 '18 at 10:28
|
show 5 more comments
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
- Works for both browser and electron with the same code
- Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
- Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
- Does NOT require
node-integrationto be false
source here
edited Nov 26 '18 at 11:04
codemirror
9541026
answered May 27 '16 at 10:01
Dale HardersDale Harders
6,7171914
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
- Works for both browser and electron with the same code
- Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
- Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
- Does NOT require
node-integrationto be false
source here
edited Nov 26 '18 at 11:04
codemirror
9541026
answered May 27 '16 at 10:01
Dale HardersDale Harders
6,7171914
edited Nov 26 '18 at 11:04
codemirror
9541026
edited Nov 26 '18 at 11:04
codemirror
9541026
edited Nov 26 '18 at 11:04
codemirror
9541026
9541026
answered May 27 '16 at 10:01
Dale HardersDale Harders
6,7171914
answered May 27 '16 at 10:01
Dale HardersDale Harders
6,7171914
answered May 27 '16 at 10:01
Dale HardersDale Harders
6,7171914
6,7171914
actually this is not electron problem it is the new standard since a lot of client side libraries now is trying to support both require() and html load , anyway you can also load jquery in your app using
– Fareed Alnamrouti
Jul 20 '16 at 5:57
1
@fareednamrouti Yes, but the point of this solution was that you don't have to list the 3rd party libraries (it just works!). Handy when you are importing many libraries (or self bundled scripts)
– Dale Harders
Aug 15 '16 at 1:47
2
thanks! in my case, this solution also works for older versions of d3 like d3 v3 or below
– headwinds
Oct 5 '16 at 18:57
2
@DaleHarders It turns outwindow.modulebegins with the same value asmodule, so your code doesn't work quite as expected. The proper way to do it is to savemoduleto some other (unused) window property instead, likewindow.tempModule. To confirm what I say, tryconsole.log(module)after your last statement to verify that nowmodule === undefined.
– Lucio Paiva
Nov 5 '16 at 23:15
1
Thanks. This word for me
– Herman Demsong
Aug 8 '18 at 10:28
|
show 5 more comments
actually this is not electron problem it is the new standard since a lot of client side libraries now is trying to support both require() and html load , anyway you can also load jquery in your app using
– Fareed Alnamrouti
Jul 20 '16 at 5:57
1
@fareednamrouti Yes, but the point of this solution was that you don't have to list the 3rd party libraries (it just works!). Handy when you are importing many libraries (or self bundled scripts)
– Dale Harders
Aug 15 '16 at 1:47
2
thanks! in my case, this solution also works for older versions of d3 like d3 v3 or below
– headwinds
Oct 5 '16 at 18:57
2
@DaleHarders It turns outwindow.modulebegins with the same value asmodule, so your code doesn't work quite as expected. The proper way to do it is to savemoduleto some other (unused) window property instead, likewindow.tempModule. To confirm what I say, tryconsole.log(module)after your last statement to verify that nowmodule === undefined.
– Lucio Paiva
Nov 5 '16 at 23:15
1
Thanks. This word for me
– Herman Demsong
Aug 8 '18 at 10:28
actually this is not electron problem it is the new standard since a lot of client side libraries now is trying to support both require() and html load , anyway you can also load jquery in your app using
– Fareed Alnamrouti
Jul 20 '16 at 5:57
actually this is not electron problem it is the new standard since a lot of client side libraries now is trying to support both require() and html load , anyway you can also load jquery in your app using
– Fareed Alnamrouti
Jul 20 '16 at 5:57
1
1
@fareednamrouti Yes, but the point of this solution was that you don't have to list the 3rd party libraries (it just works!). Handy when you are importing many libraries (or self bundled scripts)
– Dale Harders
Aug 15 '16 at 1:47
@fareednamrouti Yes, but the point of this solution was that you don't have to list the 3rd party libraries (it just works!). Handy when you are importing many libraries (or self bundled scripts)
– Dale Harders
Aug 15 '16 at 1:47
2
2
thanks! in my case, this solution also works for older versions of d3 like d3 v3 or below
– headwinds
Oct 5 '16 at 18:57
thanks! in my case, this solution also works for older versions of d3 like d3 v3 or below
– headwinds
Oct 5 '16 at 18:57
2
2
@DaleHarders It turns out
window.module begins with the same value as module, so your code doesn't work quite as expected. The proper way to do it is to save module to some other (unused) window property instead, like window.tempModule. To confirm what I say, try console.log(module) after your last statement to verify that now module === undefined.– Lucio Paiva
Nov 5 '16 at 23:15
@DaleHarders It turns out
window.module begins with the same value as module, so your code doesn't work quite as expected. The proper way to do it is to save module to some other (unused) window property instead, like window.tempModule. To confirm what I say, try console.log(module) after your last statement to verify that now module === undefined.– Lucio Paiva
Nov 5 '16 at 23:15
1
1
Thanks. This word for me
– Herman Demsong
Aug 8 '18 at 10:28
Thanks. This word for me
– Herman Demsong
Aug 8 '18 at 10:28
|
show 5 more comments
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.
edited Oct 21 '15 at 22:18
Adam Harte
8,07764479
answered Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
1
Thanks, but I have a system created by yeoman with angular. Grunt takes all my bower dependencies and build them into a vendor.js file. How can I load jquery, fix with your line, and continue with the other bower dependencies that needs jquery?
– bluesky777
Oct 7 '15 at 23:10
I don't understand, the vendor.js have jquery inside? If so, you could load the vendor.js with this window.$ method, afaik.
– Bruno Vaz
Oct 10 '15 at 2:01
Some comments later in the linked issue there is an even better solution:'node-integration': falseas option forBrowserWindow.
– Boldewyn
Dec 17 '15 at 15:55
6
Doesn't this affect other things?
– Bruno Vaz
Dec 18 '15 at 16:57
add a comment |
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.
edited Oct 21 '15 at 22:18
Adam Harte
8,07764479
answered Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
1
Thanks, but I have a system created by yeoman with angular. Grunt takes all my bower dependencies and build them into a vendor.js file. How can I load jquery, fix with your line, and continue with the other bower dependencies that needs jquery?
– bluesky777
Oct 7 '15 at 23:10
I don't understand, the vendor.js have jquery inside? If so, you could load the vendor.js with this window.$ method, afaik.
– Bruno Vaz
Oct 10 '15 at 2:01
Some comments later in the linked issue there is an even better solution:'node-integration': falseas option forBrowserWindow.
– Boldewyn
Dec 17 '15 at 15:55
6
Doesn't this affect other things?
– Bruno Vaz
Dec 18 '15 at 16:57
add a comment |
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.
edited Oct 21 '15 at 22:18
Adam Harte
8,07764479
answered Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
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.
edited Oct 21 '15 at 22:18
Adam Harte
8,07764479
answered Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
edited Oct 21 '15 at 22:18
Adam Harte
8,07764479
edited Oct 21 '15 at 22:18
Adam Harte
8,07764479
edited Oct 21 '15 at 22:18
Adam Harte
8,07764479
8,07764479
answered Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
answered Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
answered Sep 17 '15 at 3:06
Bruno VazBruno Vaz
2,40341024
2,40341024
1
Thanks, but I have a system created by yeoman with angular. Grunt takes all my bower dependencies and build them into a vendor.js file. How can I load jquery, fix with your line, and continue with the other bower dependencies that needs jquery?
– bluesky777
Oct 7 '15 at 23:10
I don't understand, the vendor.js have jquery inside? If so, you could load the vendor.js with this window.$ method, afaik.
– Bruno Vaz
Oct 10 '15 at 2:01
Some comments later in the linked issue there is an even better solution:'node-integration': falseas option forBrowserWindow.
– Boldewyn
Dec 17 '15 at 15:55
6
Doesn't this affect other things?
– Bruno Vaz
Dec 18 '15 at 16:57
add a comment |
1
Thanks, but I have a system created by yeoman with angular. Grunt takes all my bower dependencies and build them into a vendor.js file. How can I load jquery, fix with your line, and continue with the other bower dependencies that needs jquery?
– bluesky777
Oct 7 '15 at 23:10
I don't understand, the vendor.js have jquery inside? If so, you could load the vendor.js with this window.$ method, afaik.
– Bruno Vaz
Oct 10 '15 at 2:01
Some comments later in the linked issue there is an even better solution:'node-integration': falseas option forBrowserWindow.
– Boldewyn
Dec 17 '15 at 15:55
6
Doesn't this affect other things?
– Bruno Vaz
Dec 18 '15 at 16:57
1
1
Thanks, but I have a system created by yeoman with angular. Grunt takes all my bower dependencies and build them into a vendor.js file. How can I load jquery, fix with your line, and continue with the other bower dependencies that needs jquery?
– bluesky777
Oct 7 '15 at 23:10
Thanks, but I have a system created by yeoman with angular. Grunt takes all my bower dependencies and build them into a vendor.js file. How can I load jquery, fix with your line, and continue with the other bower dependencies that needs jquery?
– bluesky777
Oct 7 '15 at 23:10
I don't understand, the vendor.js have jquery inside? If so, you could load the vendor.js with this window.$ method, afaik.
– Bruno Vaz
Oct 10 '15 at 2:01
I don't understand, the vendor.js have jquery inside? If so, you could load the vendor.js with this window.$ method, afaik.
– Bruno Vaz
Oct 10 '15 at 2:01
Some comments later in the linked issue there is an even better solution:
'node-integration': false as option for BrowserWindow.– Boldewyn
Dec 17 '15 at 15:55
Some comments later in the linked issue there is an even better solution:
'node-integration': false as option for BrowserWindow.– Boldewyn
Dec 17 '15 at 15:55
6
6
Doesn't this affect other things?
– Bruno Vaz
Dec 18 '15 at 16:57
Doesn't this affect other things?
– Bruno Vaz
Dec 18 '15 at 16:57
add a comment |
Another way of writing <script>window.$ = window.jQuery = require('./path/to/jquery');</script> is :
<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
answered Jan 19 '16 at 16:02
AaleksAaleks
2,80031929
add a comment |
Another way of writing <script>window.$ = window.jQuery = require('./path/to/jquery');</script> is :
<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
answered Jan 19 '16 at 16:02
AaleksAaleks
2,80031929
add a comment |
Another way of writing <script>window.$ = window.jQuery = require('./path/to/jquery');</script> is :
<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
answered Jan 19 '16 at 16:02
AaleksAaleks
2,80031929
Another way of writing <script>window.$ = window.jQuery = require('./path/to/jquery');</script> is :
<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
answered Jan 19 '16 at 16:02
AaleksAaleks
2,80031929
edited Jan 19 '16 at 18:34
answered Jan 19 '16 at 16:02
AaleksAaleks
2,80031929
answered Jan 19 '16 at 16:02
AaleksAaleks
2,80031929
answered Jan 19 '16 at 16:02
AaleksAaleks
2,80031929
2,80031929
add a comment |
add a comment |
electron FAQ answer :
http://electron.atom.io/docs/faq/
I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
Due to the Node.js integration of Electron, there are some extra
symbols inserted into the DOM like module, exports, require. This
causes problems for some libraries since they want to insert the
symbols with the same names.
To solve this, you can turn off node integration in Electron:
// In the main process.
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false } });
But if you want to keep the abilities of using Node.js and Electron
APIs, you have to rename the symbols in the page before including
other libraries:
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports; delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
answered Jul 11 '16 at 16:01
Fran6Fran6
49143
@Fran6 what can I do if I'm loading an external page? :(
– georgiosd
Dec 17 '16 at 16:36
This worked but after doing this my Electron app would not close -- that is, I could not exit the web page.
– tale852150
Aug 4 '17 at 20:13
add a comment |
electron FAQ answer :
http://electron.atom.io/docs/faq/
I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
Due to the Node.js integration of Electron, there are some extra
symbols inserted into the DOM like module, exports, require. This
causes problems for some libraries since they want to insert the
symbols with the same names.
To solve this, you can turn off node integration in Electron:
// In the main process.
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false } });
But if you want to keep the abilities of using Node.js and Electron
APIs, you have to rename the symbols in the page before including
other libraries:
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports; delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
answered Jul 11 '16 at 16:01
Fran6Fran6
49143
@Fran6 what can I do if I'm loading an external page? :(
– georgiosd
Dec 17 '16 at 16:36
This worked but after doing this my Electron app would not close -- that is, I could not exit the web page.
– tale852150
Aug 4 '17 at 20:13
add a comment |
electron FAQ answer :
http://electron.atom.io/docs/faq/
I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
Due to the Node.js integration of Electron, there are some extra
symbols inserted into the DOM like module, exports, require. This
causes problems for some libraries since they want to insert the
symbols with the same names.
To solve this, you can turn off node integration in Electron:
// In the main process.
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false } });
But if you want to keep the abilities of using Node.js and Electron
APIs, you have to rename the symbols in the page before including
other libraries:
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports; delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
answered Jul 11 '16 at 16:01
Fran6Fran6
49143
electron FAQ answer :
http://electron.atom.io/docs/faq/
I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
Due to the Node.js integration of Electron, there are some extra
symbols inserted into the DOM like module, exports, require. This
causes problems for some libraries since they want to insert the
symbols with the same names.
To solve this, you can turn off node integration in Electron:
// In the main process.
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false } });
But if you want to keep the abilities of using Node.js and Electron
APIs, you have to rename the symbols in the page before including
other libraries:
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports; delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
answered Jul 11 '16 at 16:01
Fran6Fran6
49143
answered Jul 11 '16 at 16:01
Fran6Fran6
49143
answered Jul 11 '16 at 16:01
Fran6Fran6
49143
answered Jul 11 '16 at 16:01
Fran6Fran6
49143
49143
@Fran6 what can I do if I'm loading an external page? :(
– georgiosd
Dec 17 '16 at 16:36
This worked but after doing this my Electron app would not close -- that is, I could not exit the web page.
– tale852150
Aug 4 '17 at 20:13
add a comment |
@Fran6 what can I do if I'm loading an external page? :(
– georgiosd
Dec 17 '16 at 16:36
This worked but after doing this my Electron app would not close -- that is, I could not exit the web page.
– tale852150
Aug 4 '17 at 20:13
@Fran6 what can I do if I'm loading an external page? :(
– georgiosd
Dec 17 '16 at 16:36
@Fran6 what can I do if I'm loading an external page? :(
– georgiosd
Dec 17 '16 at 16:36
This worked but after doing this my Electron app would not close -- that is, I could not exit the web page.
– tale852150
Aug 4 '17 at 20:13
This worked but after doing this my Electron app would not close -- that is, I could not exit the web page.
– tale852150
Aug 4 '17 at 20:13
add a comment |
Just came across this same problem
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
worked for me
answered Oct 8 '16 at 16:21
Dhaval ChauhanDhaval Chauhan
2,47611014
This is exactly what my original answer says.
– Bruno Vaz
Oct 9 '16 at 19:04
4
@BrunoVaz Sir you are manually adding Jquery, I am using npm
– Dhaval Chauhan
Oct 11 '16 at 17:28
Accepted answer works but thats way better. Thank you man
– bmavus
Oct 20 '16 at 20:03
@bmavus Yes the code looks much neater
– Dhaval Chauhan
Oct 22 '16 at 14:16
Hi how to do same with materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. something like this <script>window.Materialize = window.Materialize = require('Materialize');</script> ??? can someone help
– Makjb lh
Apr 24 '17 at 13:33
|
show 1 more comment
Just came across this same problem
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
worked for me
answered Oct 8 '16 at 16:21
Dhaval ChauhanDhaval Chauhan
2,47611014
This is exactly what my original answer says.
– Bruno Vaz
Oct 9 '16 at 19:04
4
@BrunoVaz Sir you are manually adding Jquery, I am using npm
– Dhaval Chauhan
Oct 11 '16 at 17:28
Accepted answer works but thats way better. Thank you man
– bmavus
Oct 20 '16 at 20:03
@bmavus Yes the code looks much neater
– Dhaval Chauhan
Oct 22 '16 at 14:16
Hi how to do same with materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. something like this <script>window.Materialize = window.Materialize = require('Materialize');</script> ??? can someone help
– Makjb lh
Apr 24 '17 at 13:33
|
show 1 more comment
Just came across this same problem
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
worked for me
answered Oct 8 '16 at 16:21
Dhaval ChauhanDhaval Chauhan
2,47611014
Just came across this same problem
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
worked for me
answered Oct 8 '16 at 16:21
Dhaval ChauhanDhaval Chauhan
2,47611014
answered Oct 8 '16 at 16:21
Dhaval ChauhanDhaval Chauhan
2,47611014
answered Oct 8 '16 at 16:21
Dhaval ChauhanDhaval Chauhan
2,47611014
answered Oct 8 '16 at 16:21
Dhaval ChauhanDhaval Chauhan
2,47611014
2,47611014
This is exactly what my original answer says.
– Bruno Vaz
Oct 9 '16 at 19:04
4
@BrunoVaz Sir you are manually adding Jquery, I am using npm
– Dhaval Chauhan
Oct 11 '16 at 17:28
Accepted answer works but thats way better. Thank you man
– bmavus
Oct 20 '16 at 20:03
@bmavus Yes the code looks much neater
– Dhaval Chauhan
Oct 22 '16 at 14:16
Hi how to do same with materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. something like this <script>window.Materialize = window.Materialize = require('Materialize');</script> ??? can someone help
– Makjb lh
Apr 24 '17 at 13:33
|
show 1 more comment
This is exactly what my original answer says.
– Bruno Vaz
Oct 9 '16 at 19:04
4
@BrunoVaz Sir you are manually adding Jquery, I am using npm
– Dhaval Chauhan
Oct 11 '16 at 17:28
Accepted answer works but thats way better. Thank you man
– bmavus
Oct 20 '16 at 20:03
@bmavus Yes the code looks much neater
– Dhaval Chauhan
Oct 22 '16 at 14:16
Hi how to do same with materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. something like this <script>window.Materialize = window.Materialize = require('Materialize');</script> ??? can someone help
– Makjb lh
Apr 24 '17 at 13:33
This is exactly what my original answer says.
– Bruno Vaz
Oct 9 '16 at 19:04
This is exactly what my original answer says.
– Bruno Vaz
Oct 9 '16 at 19:04
4
4
@BrunoVaz Sir you are manually adding Jquery, I am using npm
– Dhaval Chauhan
Oct 11 '16 at 17:28
@BrunoVaz Sir you are manually adding Jquery, I am using npm
– Dhaval Chauhan
Oct 11 '16 at 17:28
Accepted answer works but thats way better. Thank you man
– bmavus
Oct 20 '16 at 20:03
Accepted answer works but thats way better. Thank you man
– bmavus
Oct 20 '16 at 20:03
@bmavus Yes the code looks much neater
– Dhaval Chauhan
Oct 22 '16 at 14:16
@bmavus Yes the code looks much neater
– Dhaval Chauhan
Oct 22 '16 at 14:16
Hi how to do same with materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. something like this <script>window.Materialize = window.Materialize = require('Materialize');</script> ??? can someone help
– Makjb lh
Apr 24 '17 at 13:33
Hi how to do same with materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. something like this <script>window.Materialize = window.Materialize = require('Materialize');</script> ??? can someone help
– Makjb lh
Apr 24 '17 at 13:33
|
show 1 more comment
You can put node-integration: false inside options on BrowserWindow.
eg: window = new BrowserWindow({'node-integration': false});
edited Apr 22 '16 at 16:35
Cethy
16113
answered Jan 11 '16 at 13:02
Murilo FeresMurilo Feres
18113
4
This is good solution for users that doesn't need node integration.
– Adam Szmyd
Feb 1 '16 at 7:02
2
this doesn't work anymore
– Santiago Hernández
Aug 5 '16 at 20:26
This is awesome , perfectly works for me. Thanks @Murilo Feres. Any ways what node-integration options does?
– Ahesanali Momin
Jan 19 '17 at 11:54
3
not work @1.4, please use : let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } })
– holly
Feb 24 '17 at 3:36
add a comment |
You can put node-integration: false inside options on BrowserWindow.
eg: window = new BrowserWindow({'node-integration': false});
edited Apr 22 '16 at 16:35
Cethy
16113
answered Jan 11 '16 at 13:02
Murilo FeresMurilo Feres
18113
4
This is good solution for users that doesn't need node integration.
– Adam Szmyd
Feb 1 '16 at 7:02
2
this doesn't work anymore
– Santiago Hernández
Aug 5 '16 at 20:26
This is awesome , perfectly works for me. Thanks @Murilo Feres. Any ways what node-integration options does?
– Ahesanali Momin
Jan 19 '17 at 11:54
3
not work @1.4, please use : let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } })
– holly
Feb 24 '17 at 3:36
add a comment |
You can put node-integration: false inside options on BrowserWindow.
eg: window = new BrowserWindow({'node-integration': false});
edited Apr 22 '16 at 16:35
Cethy
16113
answered Jan 11 '16 at 13:02
Murilo FeresMurilo Feres
18113
You can put node-integration: false inside options on BrowserWindow.
eg: window = new BrowserWindow({'node-integration': false});
edited Apr 22 '16 at 16:35
Cethy
16113
answered Jan 11 '16 at 13:02
Murilo FeresMurilo Feres
18113
edited Apr 22 '16 at 16:35
Cethy
16113
edited Apr 22 '16 at 16:35
Cethy
16113
edited Apr 22 '16 at 16:35
Cethy
16113
16113
answered Jan 11 '16 at 13:02
Murilo FeresMurilo Feres
18113
answered Jan 11 '16 at 13:02
Murilo FeresMurilo Feres
18113
answered Jan 11 '16 at 13:02
Murilo FeresMurilo Feres
18113
18113
4
This is good solution for users that doesn't need node integration.
– Adam Szmyd
Feb 1 '16 at 7:02
2
this doesn't work anymore
– Santiago Hernández
Aug 5 '16 at 20:26
This is awesome , perfectly works for me. Thanks @Murilo Feres. Any ways what node-integration options does?
– Ahesanali Momin
Jan 19 '17 at 11:54
3
not work @1.4, please use : let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } })
– holly
Feb 24 '17 at 3:36
add a comment |
4
This is good solution for users that doesn't need node integration.
– Adam Szmyd
Feb 1 '16 at 7:02
2
this doesn't work anymore
– Santiago Hernández
Aug 5 '16 at 20:26
This is awesome , perfectly works for me. Thanks @Murilo Feres. Any ways what node-integration options does?
– Ahesanali Momin
Jan 19 '17 at 11:54
3
not work @1.4, please use : let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } })
– holly
Feb 24 '17 at 3:36
4
4
This is good solution for users that doesn't need node integration.
– Adam Szmyd
Feb 1 '16 at 7:02
This is good solution for users that doesn't need node integration.
– Adam Szmyd
Feb 1 '16 at 7:02
2
2
this doesn't work anymore
– Santiago Hernández
Aug 5 '16 at 20:26
this doesn't work anymore
– Santiago Hernández
Aug 5 '16 at 20:26
This is awesome , perfectly works for me. Thanks @Murilo Feres. Any ways what node-integration options does?
– Ahesanali Momin
Jan 19 '17 at 11:54
This is awesome , perfectly works for me. Thanks @Murilo Feres. Any ways what node-integration options does?
– Ahesanali Momin
Jan 19 '17 at 11:54
3
3
not work @1.4, please use : let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } })
– holly
Feb 24 '17 at 3:36
not work @1.4, please use : let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } })
– holly
Feb 24 '17 at 3:36
add a comment |
A nice and clean solution
- Install jQuery using npm. (
npm install jquery --save) - Use it:
<script> let $ = require("jquery") </script>
edited Oct 11 '17 at 13:46
Tassu
17329
answered May 19 '17 at 8:46
adgelbfishadgelbfish
265212
add a comment |
A nice and clean solution
- Install jQuery using npm. (
npm install jquery --save) - Use it:
<script> let $ = require("jquery") </script>
edited Oct 11 '17 at 13:46
Tassu
17329
answered May 19 '17 at 8:46
adgelbfishadgelbfish
265212
add a comment |
A nice and clean solution
- Install jQuery using npm. (
npm install jquery --save) - Use it:
<script> let $ = require("jquery") </script>
edited Oct 11 '17 at 13:46
Tassu
17329
answered May 19 '17 at 8:46
adgelbfishadgelbfish
265212
A nice and clean solution
- Install jQuery using npm. (
npm install jquery --save) - Use it:
<script> let $ = require("jquery") </script>
edited Oct 11 '17 at 13:46
Tassu
17329
answered May 19 '17 at 8:46
adgelbfishadgelbfish
265212
edited Oct 11 '17 at 13:46
Tassu
17329
edited Oct 11 '17 at 13:46
Tassu
17329
edited Oct 11 '17 at 13:46
Tassu
17329
17329
answered May 19 '17 at 8:46
adgelbfishadgelbfish
265212
answered May 19 '17 at 8:46
adgelbfishadgelbfish
265212
answered May 19 '17 at 8:46
adgelbfishadgelbfish
265212
265212
add a comment |
add a comment |
<script>
delete window.module;
</script>
before your jquery import and you're good to go. more info here.
answered Oct 29 '17 at 1:21
Sagiv OfekSagiv Ofek
13.9k54649
add a comment |
<script>
delete window.module;
</script>
before your jquery import and you're good to go. more info here.
answered Oct 29 '17 at 1:21
Sagiv OfekSagiv Ofek
13.9k54649
add a comment |
<script>
delete window.module;
</script>
before your jquery import and you're good to go. more info here.
answered Oct 29 '17 at 1:21
Sagiv OfekSagiv Ofek
13.9k54649
<script>
delete window.module;
</script>
before your jquery import and you're good to go. more info here.
answered Oct 29 '17 at 1:21
Sagiv OfekSagiv Ofek
13.9k54649
answered Oct 29 '17 at 1:21
Sagiv OfekSagiv Ofek
13.9k54649
answered Oct 29 '17 at 1:21
Sagiv OfekSagiv Ofek
13.9k54649
answered Oct 29 '17 at 1:21
Sagiv OfekSagiv Ofek
13.9k54649
13.9k54649
add a comment |
add a comment |
I think i understand your struggle i solved it little bit differently.I used script loader for my js file which is including jquery.Script loader takes your js file and attaching it to top of your vendor.js file it did the magic for me.
https://www.npmjs.com/package/script-loader
after installing the script loader add this into your boot or application file.
import 'script!path/your-file.js';
answered Apr 28 '16 at 8:34
Mertcan DikenMertcan Diken
6,73911123
add a comment |
I think i understand your struggle i solved it little bit differently.I used script loader for my js file which is including jquery.Script loader takes your js file and attaching it to top of your vendor.js file it did the magic for me.
https://www.npmjs.com/package/script-loader
after installing the script loader add this into your boot or application file.
import 'script!path/your-file.js';
answered Apr 28 '16 at 8:34
Mertcan DikenMertcan Diken
6,73911123
add a comment |
I think i understand your struggle i solved it little bit differently.I used script loader for my js file which is including jquery.Script loader takes your js file and attaching it to top of your vendor.js file it did the magic for me.
https://www.npmjs.com/package/script-loader
after installing the script loader add this into your boot or application file.
import 'script!path/your-file.js';
answered Apr 28 '16 at 8:34
Mertcan DikenMertcan Diken
6,73911123
I think i understand your struggle i solved it little bit differently.I used script loader for my js file which is including jquery.Script loader takes your js file and attaching it to top of your vendor.js file it did the magic for me.
https://www.npmjs.com/package/script-loader
after installing the script loader add this into your boot or application file.
import 'script!path/your-file.js';
answered Apr 28 '16 at 8:34
Mertcan DikenMertcan Diken
6,73911123
answered Apr 28 '16 at 8:34
Mertcan DikenMertcan Diken
6,73911123
answered Apr 28 '16 at 8:34
Mertcan DikenMertcan Diken
6,73911123
answered Apr 28 '16 at 8:34
Mertcan DikenMertcan Diken
6,73911123
6,73911123
add a comment |
add a comment |
ok, here's another option, if you want a relative include...
<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
answered May 2 '17 at 20:33
aestrroaestrro
552410
add a comment |
ok, here's another option, if you want a relative include...
<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
answered May 2 '17 at 20:33
aestrroaestrro
552410
add a comment |
ok, here's another option, if you want a relative include...
<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
answered May 2 '17 at 20:33
aestrroaestrro
552410
ok, here's another option, if you want a relative include...
<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
answered May 2 '17 at 20:33
aestrroaestrro
552410
answered May 2 '17 at 20:33
aestrroaestrro
552410
answered May 2 '17 at 20:33
aestrroaestrro
552410
answered May 2 '17 at 20:33
aestrroaestrro
552410
552410
add a comment |
add a comment |
If you are using Angular2 you can create a new js file with this code:
// jquery-electron.js
if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
window.jQuery = window.$ = module.exports;
}
and put it right after jquery path, in .angular-cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"assets/js/jquery-electron.js",
...
...
]
answered Apr 18 '18 at 10:19
MaxMax
17917
add a comment |
If you are using Angular2 you can create a new js file with this code:
// jquery-electron.js
if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
window.jQuery = window.$ = module.exports;
}
and put it right after jquery path, in .angular-cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"assets/js/jquery-electron.js",
...
...
]
answered Apr 18 '18 at 10:19
MaxMax
17917
add a comment |
If you are using Angular2 you can create a new js file with this code:
// jquery-electron.js
if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
window.jQuery = window.$ = module.exports;
}
and put it right after jquery path, in .angular-cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"assets/js/jquery-electron.js",
...
...
]
answered Apr 18 '18 at 10:19
MaxMax
17917
If you are using Angular2 you can create a new js file with this code:
// jquery-electron.js
if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
window.jQuery = window.$ = module.exports;
}
and put it right after jquery path, in .angular-cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"assets/js/jquery-electron.js",
...
...
]
answered Apr 18 '18 at 10:19
MaxMax
17917
answered Apr 18 '18 at 10:19
MaxMax
17917
answered Apr 18 '18 at 10:19
MaxMax
17917
answered Apr 18 '18 at 10:19
MaxMax
17917
17917
add a comment |
add a comment |
worked for me using the following code
var $ = require('jquery')
answered Apr 23 '18 at 6:46
Adeojo Emmanuel IMMAdeojo Emmanuel IMM
632516
add a comment |
worked for me using the following code
var $ = require('jquery')
answered Apr 23 '18 at 6:46
Adeojo Emmanuel IMMAdeojo Emmanuel IMM
632516
add a comment |
worked for me using the following code
var $ = require('jquery')
answered Apr 23 '18 at 6:46
Adeojo Emmanuel IMMAdeojo Emmanuel IMM
632516
worked for me using the following code
var $ = require('jquery')
answered Apr 23 '18 at 6:46
Adeojo Emmanuel IMMAdeojo Emmanuel IMM
632516
answered Apr 23 '18 at 6:46
Adeojo Emmanuel IMMAdeojo Emmanuel IMM
632516
answered Apr 23 '18 at 6:46
Adeojo Emmanuel IMMAdeojo Emmanuel IMM
632516
answered Apr 23 '18 at 6:46
Adeojo Emmanuel IMMAdeojo Emmanuel IMM
632516
632516
add a comment |
add a comment |
im building and Angular App with electron, my solution was the following:
index.html
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
So Jquery gets loaded from angular.json if on browser, else if it is an electron builded app it will require module instead.
If you want to import jquery in index.html instead of importing from angular.json use the following solution:
<script src="path/to/jquery"></script>
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
answered Nov 22 '18 at 9:48
Kuza GraveKuza Grave
19118
add a comment |
im building and Angular App with electron, my solution was the following:
index.html
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
So Jquery gets loaded from angular.json if on browser, else if it is an electron builded app it will require module instead.
If you want to import jquery in index.html instead of importing from angular.json use the following solution:
<script src="path/to/jquery"></script>
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
answered Nov 22 '18 at 9:48
Kuza GraveKuza Grave
19118
add a comment |
im building and Angular App with electron, my solution was the following:
index.html
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
So Jquery gets loaded from angular.json if on browser, else if it is an electron builded app it will require module instead.
If you want to import jquery in index.html instead of importing from angular.json use the following solution:
<script src="path/to/jquery"></script>
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
answered Nov 22 '18 at 9:48
Kuza GraveKuza Grave
19118
im building and Angular App with electron, my solution was the following:
index.html
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
So Jquery gets loaded from angular.json if on browser, else if it is an electron builded app it will require module instead.
If you want to import jquery in index.html instead of importing from angular.json use the following solution:
<script src="path/to/jquery"></script>
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>
answered Nov 22 '18 at 9:48
Kuza GraveKuza Grave
19118
answered Nov 22 '18 at 9:48
Kuza GraveKuza Grave
19118
answered Nov 22 '18 at 9:48
Kuza GraveKuza Grave
19118
answered Nov 22 '18 at 9:48
Kuza GraveKuza Grave
19118
19118
add a comment |
add a comment |
1.Install jQuery using npm.
npm install jquery --save
2.
<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>
answered Jul 31 '18 at 5:51
Alexey KolotseyAlexey Kolotsey
362
add a comment |
1.Install jQuery using npm.
npm install jquery --save
2.
<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>
answered Jul 31 '18 at 5:51
Alexey KolotseyAlexey Kolotsey
362
add a comment |
1.Install jQuery using npm.
npm install jquery --save
2.
<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>
answered Jul 31 '18 at 5:51
Alexey KolotseyAlexey Kolotsey
362
1.Install jQuery using npm.
npm install jquery --save
2.
<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>
answered Jul 31 '18 at 5:51
Alexey KolotseyAlexey Kolotsey
362
answered Jul 31 '18 at 5:51
Alexey KolotseyAlexey Kolotsey
362
answered Jul 31 '18 at 5:51
Alexey KolotseyAlexey Kolotsey
362
answered Jul 31 '18 at 5:51
Alexey KolotseyAlexey Kolotsey
362
362
add a comment |
add a comment |
I face the same issue and this worked for me!
Install jQuery using npm
npm i jquery
Then include jQuery in one of the following ways.
Using Script tag
<script>window.$ = window.jQuery = require('jquery');</script>
Using Babel
import $ from "jquery";
Using Webpack
var $ = require('jquery')
answered Sep 13 '18 at 4:09
Carlos AbrahamCarlos Abraham
5471618
add a comment |
I face the same issue and this worked for me!
Install jQuery using npm
npm i jquery
Then include jQuery in one of the following ways.
Using Script tag
<script>window.$ = window.jQuery = require('jquery');</script>
Using Babel
import $ from "jquery";
Using Webpack
var $ = require('jquery')
answered Sep 13 '18 at 4:09
Carlos AbrahamCarlos Abraham
5471618
add a comment |
I face the same issue and this worked for me!
Install jQuery using npm
npm i jquery
Then include jQuery in one of the following ways.
Using Script tag
<script>window.$ = window.jQuery = require('jquery');</script>
Using Babel
import $ from "jquery";
Using Webpack
var $ = require('jquery')
answered Sep 13 '18 at 4:09
Carlos AbrahamCarlos Abraham
5471618
I face the same issue and this worked for me!
Install jQuery using npm
npm i jquery
Then include jQuery in one of the following ways.
Using Script tag
<script>window.$ = window.jQuery = require('jquery');</script>
Using Babel
import $ from "jquery";
Using Webpack
var $ = require('jquery')
answered Sep 13 '18 at 4:09
Carlos AbrahamCarlos Abraham
5471618
edited Sep 13 '18 at 4:15
answered Sep 13 '18 at 4:09
Carlos AbrahamCarlos Abraham
5471618
answered Sep 13 '18 at 4:09
Carlos AbrahamCarlos Abraham
5471618
answered Sep 13 '18 at 4:09
Carlos AbrahamCarlos Abraham
5471618
5471618
add a comment |
add a comment |
This works for me.
<script languange="JavaScript">
if (typeof module === 'object') {window.module = module; module = undefined;}
</script>
Things to consider:
1) Put this in section right before </head>
2) Include Jquery.min.js or Jquery.js right before the </body> tag
edited Nov 14 '18 at 9:26
Lithilion
7111919
answered Nov 14 '18 at 6:48
Vishal GoyalVishal Goyal
213
add a comment |
This works for me.
<script languange="JavaScript">
if (typeof module === 'object') {window.module = module; module = undefined;}
</script>
Things to consider:
1) Put this in section right before </head>
2) Include Jquery.min.js or Jquery.js right before the </body> tag
edited Nov 14 '18 at 9:26
Lithilion
7111919
answered Nov 14 '18 at 6:48
Vishal GoyalVishal Goyal
213
add a comment |
This works for me.
<script languange="JavaScript">
if (typeof module === 'object') {window.module = module; module = undefined;}
</script>
Things to consider:
1) Put this in section right before </head>
2) Include Jquery.min.js or Jquery.js right before the </body> tag
edited Nov 14 '18 at 9:26
Lithilion
7111919
answered Nov 14 '18 at 6:48
Vishal GoyalVishal Goyal
213
This works for me.
<script languange="JavaScript">
if (typeof module === 'object') {window.module = module; module = undefined;}
</script>
Things to consider:
1) Put this in section right before </head>
2) Include Jquery.min.js or Jquery.js right before the </body> tag
edited Nov 14 '18 at 9:26
Lithilion
7111919
answered Nov 14 '18 at 6:48
Vishal GoyalVishal Goyal
213
edited Nov 14 '18 at 9:26
Lithilion
7111919
edited Nov 14 '18 at 9:26
Lithilion
7111919
edited Nov 14 '18 at 9:26
Lithilion
7111919
7111919
answered Nov 14 '18 at 6:48
Vishal GoyalVishal Goyal
213
answered Nov 14 '18 at 6:48
Vishal GoyalVishal Goyal
213
answered Nov 14 '18 at 6:48
Vishal GoyalVishal Goyal
213
213
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f32621988%2felectron-jquery-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Try loading the jQuery from one of the online repositories (Google, Amazon) and provide the code in here. Without the code there's little anyone can help you with.
– YePhIcK
Sep 17 '15 at 3:16
Hey, I posted this question so I could answer it myself, but as soon as I can I'll add some code to make the question more complete.
– Bruno Vaz
Sep 17 '15 at 19:43
Why not just use the Electron
requirefunction?– Will Hoskings
Sep 8 '18 at 14:28