Questions & Help>Questions

Cannot use local js library with Phoenix

/phoenix#javascript#js
alexl

alexl

I try to use third party JS like Moment.js, I followed the guide.

So, I added import moment from 'moment'; to my app.js.
Moment is well added to app.js in static/assets/ but when I want to use it in Liveview template or layout with or without Alpine JS I have the Uncaught ReferenceError: moment is not defined.

When I use the CDN (<script src='URL' />) in the layout it works well, but not with npm packages…

Thanks for your help

4 comments
/phoenix#javascript#js
1852 4

Showing Posts 1 to 4

sfusato

sfusato

How are you trying to use it? Can you show some examples?

I can only assume that when you add it directly via the script tag, the library attaches itself to the window object, thus why it works. In your app.js, add it as a global variable: window.moment = moment;

0
Post #1
alexl

alexl OP

In my root layout I have:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%= csrf_meta_tag() %>
    <%= live_title_tag assigns[:page_title] %>
    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
  </head>
  <body>
    <div class="min-h-full">
        <script>
        console.log(window.moment())
        </script>
        <main class="flex-1">
          <%= @inner_content %>
        </main>
    </div>
  </body>
</html>

and in app.js

import moment from 'moment';

window.moment = moment;

When I load my page I have Uncaught TypeError: window.moment is not a function

I tried with console.log(window.moment) but it prints undefined

0
Post #2
bartblast

bartblast

Creator of Hologram

When you use window.moment in the inline script, the app.js probably hasn’t loaded yet. So you need to use document.readyState or DOMContentLoaded event to make sure that the scripts have been loaded first.

2
Post #3
alexl

alexl OP

Thanks, it was an initialization problem :smiling_face:

1
Post #4
— All posts loaded —

Where Next? Top

View thread on forum (has 4 replies!)
phoenix
javascript
js
Home Questions & Help>Questions
3 1696 4
Last post
REPLY VIEW THREAD WITH 4 POSTS

Trending in Questions Top

katta
Questions & Help>Questions

Phoenix Ecto realistic benchmarks
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
/phoenix#ecto#troubleshooting
2 1515 11
New
brecabral
Questions & Help>Questions

Scoped Routes section of the Phoenix guides refers to a problem without explaining what it is ("but there is a problem")
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
/phoenix
6 829 4
New
achenet
Questions & Help>Questions

No Tailwind binary for FreeBSD
Hello, I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind. However, when I launch mix phx.server, I get an error...
/phoenix#freebsd#tailwindcss#tailwind
11 1073 14
New
kpanic
Questions & Help>Questions

"Mentoring" match maker? maybe MVP
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
#helpers#programming
8 940 4
New
asweet-confluent
Questions & Help>Questions

Why is Logger's default level :debug?
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
#logging#logger
13 504 10
New
Cxx-mlr
Questions & Help>Questions

Using try/catch with update_in/3
I’m working on a small exercise involving update_in/3, and I came up with this solution: data = %{ name: "Periodic Table", category:...
#learning-elixir
9 273 12
New
ChrisAmelia
Questions & Help>Questions

Need help understanding order of function calls from Phoenix auth
I’ve got trouble wrapping my head around the order in which functions are called in this snippet (from Phoenix’s authentication): toke...
/phoenix#learning-elixir
0 76 2
New

Other Trending Topics Top

GenericJam
News>Announcing

Mob - Native BEAM / Elixir on Native Mobile
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
/mob#library#beam#mobile#liveview#react-native#mobile-app#mobile-development
259 8396 111
New
JesseHerrick
News>Announcing

Dexter - A fast, full-featured Elixir LSP optimized for large codebases
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
#library#lsp#dexter
187 6988 64
New
mudasobwa
Chat & Discussions>Discussions

Cure - a new language compiled to BEAM
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
#static-types#type-checking#types#fsm
171 6315 70
New
garrison
News>Announcing

Hobbes - a low-level distributed database for the Elixir programming language
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
#library#database#distributed#hobbes
306 6242 88
New
mhanberg
Chat & Discussions>Discussions

Expert LSP is now available!
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
#lsp#expert
220 4348 38
New
budgie
Chat & Discussions>Discussions

I genuinely hate programming now
A little off-topic, but I feel like people here have a good head on their shoulders. I used to be quite good at making software. Was luc...
#ai#career#rant
437 3583 110
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Defacto

Bringing learning, work and compliance together since 1987.

Our Sponsors

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

WyeWorks

**Building the future of software with AI, trust, and human connection.**

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

WyeWorks

**Building the future of software with AI, trust, and human connection.**

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews