0

I'm getting an Error:

"Uncaught ReferenceError: $ is not defined"

when trying to use $('#someid') within my custom js code within an electron app.

The scripts are in the correct order in my html file:

<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/popper.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="mymidi.js"></script>

This happens if i attempt to use on one of the first lines of mymidi.js:

console.log($('#mappingnotify').innerText);

or for an event that is created later during a dom-element creation:

function pickdev(){...
midiinput.on('noteon',function(msg){
...
  $('#mappingnotify').modal('show');
...})}

the strange thing is it seems to work correctly from the console:

console.log($('#mappingnotify').innerText);

Output:

VM113:1 
kalsjhdf
Cancel

So to me, it seems that it has something to do with $ not being loaded when called... but I'm at a loss as to what, or how to fix it.

Rajan
  • 1,463
  • 12
  • 26
linuxuser42
  • 31
  • 8
  • 1
    Most browsers have their own alias for `$` in the console, even if jQuery isn't loaded. Are you sure you have the correct path to jquery.min.js? – Daniel Beck Apr 19 '19 at 17:36
  • Are the scripts loaded prior to the code that uses them executing? – Scott Marcus Apr 19 '19 at 17:39
  • By the way (FYI) `type="text/javascript"` hasn't been needed for years. – Scott Marcus Apr 19 '19 at 17:44
  • @DanielBeck good to know, i wasn't aware of that, the path is correct as chromium dev tools shows it loaded; Scott - yes scripts seem to be loaded prior as the code i posted is all contained in mymidi.js, could chromium be loading them out of order somehow? – linuxuser42 Apr 19 '19 at 18:05
  • where are you including your reference to jquery? `head` or `body`? – Void Spirit Apr 19 '19 at 18:15
  • @ConspicuousCompiler initally that didn't look anything like what i was facing, but after reading over the comments and bug report it does seem like it might fit my issue - though I'm not really clear on what's going wrong. Seems there is some code in jquery that determines where to load it, ie. module vs window, but what exactly does that mean? – linuxuser42 Apr 19 '19 at 18:26
  • @linuxuser42 One of the answers in the duplicate question explains the problem: https://stackoverflow.com/a/32621989/106769 ; Basically jquery sets the $ variable in a different place if it thinks it's being loaded in a module. – Conspicuous Compiler Apr 19 '19 at 18:36
  • @ConspicuousCompiler I saw that.. so basically it seem that jquery is just magically trying to guess what you're doing with it and will load as a "node module" first if that's what it detects (via the module var) and just straight up doesn't set it's self via the window.$? if so it seems like a pretty big got-ya! Also, have tested and using the `window.$ = window.jQuery = require(path/to/jquery)` works so thanks for the help there! – linuxuser42 Apr 19 '19 at 18:51
  • The issues is addressed in the main Electron FAQ https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron , and they provide their own suggested fixes there. It's a common issue, but since jquery is on the wane, it isn't quite the issue it once was. – Conspicuous Compiler Apr 19 '19 at 18:54
  • Wow, thanks, that is very helpful, wish i could upvote your comments as it's made it much clearer now. – linuxuser42 Apr 19 '19 at 18:59

1 Answers1

-1

It's not reading your jQuery file.

Have you set a static folder? I've never used Electron, but in Node.js you can set a static folder and the server would know when where to start in relation.

So, maybe create a subfolder called 'public' inside your root app folder, move all the 'assets','bootstrap', etc inside the public folder. Then inside the main file, add const pathToAsset = path.join(__static, 'public')

https://webpack.electron.build/using-static-assets

Ashell F
  • 11
  • 1
  • Thanks, but I don't think that is the issue here, there is a static folder and it's correctly loading my custom js file and other css files, it also seems that the jquery file is loading as the browser's dev tools show it in the sources tab – linuxuser42 Apr 19 '19 at 18:10
  • 1
    This is not an answer, it's questions and so should be a comment. I realize that you don't have enough rep. yet to comment, so focus on providing good, quality answers to get your rep. high enough. – Scott Marcus Apr 19 '19 at 18:11
  • I had a similar error, and it seems that isn't loading. – Danielr Nov 30 '21 at 16:19