jQuery, Font Awesome and Sockets

Phoenix Forum Questions / Help
, ,
1

Hi,

I have a new Phoenix project (Latest versions of everything) and have a problem when I use:

import socket from "./socket"

I am using jQuery to highlight my menu and each menu item has an icon from Font Awesome. In my app.js I am defining jQuery like this:

window.$ = $;

and the script in my base layout HTML is:

var page = window.location.pathname.split('/')[1]
$('#' + page).toggleClass('active')

I am also importing the icons in app.js:

import { faUser } from "@fortawesome/pro-light-svg-icons/faUser";
library.add(faUser);

when I use the import statement for sockets I get an error uncaught reference error: $ is undefined and my icons disappear.

I have tried moving script to view render function but same problem exists … only thing that fixes it is commenting out the import for sockets.

Thanks in advance,

Andrew

2

That would imply Phoenix 1.4 and webpack.

Correction: For webpack 4 imports-loader.
GitHub

and the script in my base layout HTML is:

This might be a problem because as AFAIK webpack deals with modular JavaScript, not script in the page. So the easiest way to deal with that is to install Phoenix with --no-webpack (see also).

3

Thanks, but it all works fine when not using Sockets … I am trying to work out why importing that script makes a difference.

Andrew

4

When using webpack, there’s no global $. You have to import it yourself, you might try:

import $ from 'jquery'
window.$ = $
5

I am trying to work out why importing that script makes a difference.

Just because it worked before doesn’t mean it’s a good idea.

Mixing in-page script and modules is a Bad Idea™.

If you plan to use webpack move your code into a module (or all of it into app.js). I described the process in principle here (for Brunch - but the idea is the same). For some more background into bundling see Modern JavaScript Explained For Dinosaurs.

1 Like
6

:grinning: I like the trademark and the assumption I am a dinosaur … I am!