Setup, import and use Javascript in Phoenix

Phoenix Forum Questions / Help
1

I read the docs at (https://hexdocs.pm/phoenix/static_assets.html) but it’s still confuse.
What are the necessary steps fo setup, import and use a javascript library like Jquery in Phoenix?

Steps that I tryed:

cd assets/
npm install jquery
npm rebuild
brunch build

js/app.js

import $ from "jquery"
import jQuery from 'jquery'

brunch-config.js

  npm: {
    enabled: true,
    whitelist: ["jquery"]
  }

form.html.eex

$(document).ready(function() {
  console.log("Test");
  ...
});

Chrome console

$ is not defined
jquery is not defined
jQuery is not defined
1 Like
2

You are importing it, but not ‘using’ it, so it gets optimized out.

This is on the console, that wouldn’t work even if it did not get optimized out. If you want a module accessible at global level then you need to tell brunch where to put it (this is all normal brunch stuff, nothing at all to do with phoenix, you can use whatever packager you want if you don’t want brunch), so just add this to the npm config in your brunch-config.js file:

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
    }
  }

The globals says to take the jquery module and bind it to the global (browser window scope) names of $ and jQuery here.

Putting it in the global scope also prevents any of it from being optimized out (like if you add gcc as a prod optimizer), so you get the entire huge nasty bulk of jquery, even if you only use one tiny thing from it. It is good to minimize your globals for that reason. :wink:

2 Likes
3

Thanks.

For library that is not supported with Brunch, like CKEditor.
After place on /js/vendor/ and load correctly (Dev tools “Chrome/Sources”) how to “GET” references / secondary files without a phoenix route?

PS: If I place externally, like on a cdn, it works.

4

A library does not need to be ‘supported’ with brunch. Brunch is just a task runner.

Any static files like icons or fonts or images or whatever you need to copy to the priv/static directory to be hosted out, a brunch file copy task is fantastic for such uses. :slight_smile:

5

FYI: CKEditor is distributed via npm so it should be possible to manage it alongside jQuery in a similar fashion.

1 Like
6

total noob here: I have this issue but don’t understand the solution of “You are importing it, but not ‘using’ it” can you expand on how I use it, please?

1 Like
7

Have a look at How JavaScript bundlers work. Brunch is a bundler.

Most of these types of problems stem from the fact that jQuery came into use before Browserify. These days most JavaScript libraries are delivered to the development environment via npm (and before that bower). Before Browserify lots of libraries didn’t expect to be bundled - so they managed their dependencies via globals. Those libraries won’t work unless certain globals a set - which is antithetical to modules.

To get those libraries to work, Brunch has to be manually configured to associate certain modules with certain globals.
Then there is the problem that some older libraries won’t work with modern versions of jQuery.

5 Likes