3

I know there are many known solutions to this. But not a single one works. I keep getting this error:

Uncaught Exception:
ReferenceError: $ is not defined
    at: .....

Please note that I am using the npm installation of jQuery (npm install jquery --save).

I tried doing this:

<script> 
    window.nodeRequire = require; 
    delete window.require;
    delete window.exports; 
    delete window.module; 
    window.$ = window.jQuery = require('jquery');
</script>

but still got the error.

Then I tried:

<script>window.$ = window.jQuery = require('jquery');</script>

but this also did not work.

I tried it with a local file as well:

<script>window.$ = window.jQuery = require('./jquery-3.3.1.min.js');</script>

But once again, I get the dreaded "$ is not defined" error. Can someone please explain what is happening. I understand how these solutions should work but I don't understand why they do not work for me.

Here is my full HTML page in its current state:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>...</title>
  </head>
  <body>
    <h1>Test</h1>
    <div id = "test"></div>
    <script>window.$ = window.jQuery = require('./jquery-3.3.1.min.js'); 
   </script>

    <script>
      require('./renderer.js')
    </script>

  </body>
</html>

I started this project with the electron quick start at https://github.com/electron/electron-quick-start .

Thanks in advance.

Edit: Interestingly, the oauth library was interfering with jquery as well. But even after removing oauth, it still is broken.

gkgkgkgk
  • 707
  • 2
  • 7
  • 26
  • Did you check this one, https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined – highhope May 11 '18 at 01:46
  • @highhope i did, tried it, and didn't work. I even started a fresh project and it didn't work. Should I reinstall NPM or electron? I'm really not sure what to do. – gkgkgkgk May 11 '18 at 03:57
  • Interesting. I [forked](https://github.com/InViN/electron-quick-start) the [quick-start](https://github.com/electron/electron-quick-start) example & I was able to get jQuery to work. My installed node version is `v8.10.0`. – Neil P. May 11 '18 at 04:26

1 Answers1

4

I've also done npm install jquery --save on my Electron project.

The way I have gotten jQuery to work is by requiring it in the <head> tag of my HTML before any of the other <script> tags.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!-- jQuery (Should be declared before other JS imports) -->
    <script>
      var $ = jQuery = require("jquery")
    </script>
    ...
    <script src="../node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    ...
  </head>
  <body>
    ....
  </body>
</html>

I needed to install jQuery for Bootstrap so I require it before declaring the script source import for jQuery, followed by other JS that I need.

EDIT After integrating electron-forge , the above solution no longer works for me. What does work is the solution mentioned here: https://stackoverflow.com/a/37480521/1392578

Neil P.
  • 1,026
  • 2
  • 15
  • 32
  • thanks for the answer! Unfortunately this ALSO did not work.... although I did notice something. The jQuery file is correctly loaded into the application, and the error only appears when I use the $ for jQuery. Not sure if thats an important detail. Thanks. – gkgkgkgk May 11 '18 at 03:41
  • 1
    question: where are you calling jquery and getting an error? – Dan Oswalt May 11 '18 at 03:57
  • @zbnrg as of now im calling just a simple jQuery append in my createWindow function, but ideally I'd like to use jQuery's $(document).ready function. – gkgkgkgk May 11 '18 at 12:41
  • 1
    You're not using jQuery in the main (background) process, are you? – Neil P. May 11 '18 at 12:51
  • 1
    @zbnrg i forgot to mention that these things are currently going into my main.js file (which might be the issue?) – gkgkgkgk May 11 '18 at 12:53
  • 2
    @Neil that is exactly what I'm doing, should have realized that was the issue. Gonna test it asap to confirm that its the problem. :/ – gkgkgkgk May 11 '18 at 12:54
  • Cool. Wouldn't have guessed it had you not said createWindow! Should work if you switch to using it on the HTML or renderer JS. – Neil P. May 11 '18 at 13:33