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
1724 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

Blokh
Questions & Help>Questions

Huge CSV processing that needs to be processed hourly - any tips?
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
/phoenix
10 1191 5
New
kszambelanczyk
Questions & Help>Questions

Delete file on S3 with Waffle
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
/phoenix#waffle#waffle-ecto
1 695 1
New
Onor.io
Questions & Help>Questions

How To Create A Select Control From A Lookup Table?
I have what I’ve heard referred to as a “lookup table” in my database. This is a way of assigning codes to common values. One common lo...
/phoenix
3 243 5
New
Trolleger
Questions & Help>Questions

Proper way to send channel events to multiple different people for live updates?
What approach to take when sending live updates to “random” users Hi! I have a question, I have a little chat app, and when I create a DM...
/phoenix#channels
2 689 2
New
matt-savvy
Questions & Help>Questions

Honeybadger and Bandit, Phoenix, Plug errors
Anyone here using Honeybadger? My Honeybadger account is being overwhelmed with noise from some bots. Seeing a lot of Bandit.HTTPError...
/phoenix#bandit
1 222 2
New
RemyXRenard
Questions & Help>Questions

Livebook DataTable displaying charlist as list
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
/livebook#charlist
2 325 3
New
samoloth
Questions & Help>Questions

Prevent_hijacking? on email change confirmation with magic link strategy
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
/ash#ash-authentication
0 196 1
New

Other Trending Topics Top

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
168 5507 69
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
302 4824 87
New
mcass19
News>Announcing

ExRatatui - Elixir bindings for the Rust ratatui terminal UI library
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
#library#rust#terminal#tui
58 2534 15
New
Damirados
News>Announcing

Emerge & Solve - a GUI framework for Elixir
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
/nerves#library#frameworks#gui#native#state
59 2300 23
New
netoum
News>Announcing

Corex - Accessible and unstyled UI Phoenix components
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
/phoenix#library#ui#liveview#hooks#accessibility#component#tableau
61 2202 19
New
wintermeyer
News>Announcing

Vutuv.de - an open-source LinkedIn alternative built in Phoenix
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
/phoenix#fediverse#project
76 1722 40
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Coders51

We build reliable cloud platforms for business-critical systems.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

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.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyeWorks

Enabling companies to succeed by building software people love.

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

Dashbit

Build Elixir applications with speed and confidence.

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.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyeWorks

Enabling companies to succeed by building software people love.

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