Phoenix: $ is not defined


I have a template which holds a form with a few elements. I need to initialize the JS for some of these elements using jquery, but I keep getting an error saying: “$ is not defined”. I followed all the steps in this post: Setup, import and use Javascript in Phoenix and also from the official Phoenix docs.

Here is the npm section of my brunch-config.js:

      npm: {
        enabled: true,
        whitelist: ["jquery"],
        globals: {
          $: 'jquery',
          jQuery: 'jquery'

Here is how I am calling the script from my template:

      keys: {delimiter: 13},
        allowAdditions: true

Please let me know if I can provide more information.

Any help would be much appreciated, thanks in advance!

And you’re including app.js in your layout/page right? If so have you tried moving the script around on the page to be at the beginning/end of the body tag?

My understanding is that you have to include the app at the beginning of the document in the <head>. I don’t really like that, so I found this:

You put this in the head:

<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>

And then you put this after your <script src="app.js"></script>:


Remember that things compiled into modules are not available at global scope nor should they be. Instead of doing things like $... you should be doing things like require("jQuery")... (if using brunch) or so (which you can bind to a variable if you want).