andrewb
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
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Master modern tools, write cleaner code, and tackle real-world challenges with Manning books, videos, and courses. Start building today.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #blog-post
- #ai
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 5- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
peerreynders
That would imply Phoenix 1.4 and webpack.
Correction: For webpack 4 imports-loader.
GitHub
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).andrewb
Thanks, but it all works fine when not using Sockets … I am trying to work out why importing that script makes a difference.
Andrew
chensan
When using webpack, there’s no global
$. You have toimportit yourself, you might try:peerreynders
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.andrewb