Starlet9334
Hello there,
I am playing with Hologram. I’ve set up a fresh Phoenix project and followed the Hologram installation guide.
I have created a main_layout.holo like this
<head>
<title>{@page_title}</title>
<Hologram.UI.Runtime />
</head>
<body>
<slot />
</body>
At this stage, compilation works.
Now, I want to load the app’s style sheet and copied the corresponding line from root.html.heex like so
<head>
<title>{@page_title}</title>
<Hologram.UI.Runtime />
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
</head>
<body>
<slot />
</body>
However, now the compilation fails:
Compiling 1 file (.ex)
error: undefined function sigil_p/2 (expected HologramTutorial.MainLayout to define such a function or for it to be imported, but none are available)
│
4 │ prop :page_title, :string
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
│
└─ (hologram_tutorial 0.1.0) app/layouts/main_layout.ex:4: HologramTutorial.MainLayout.template/0
== Compilation error in file app/layouts/main_layout.ex ==
** (CompileError) app/layouts/main_layout.ex: cannot compile module HologramTutorial.MainLayout (errors have been logged)
Removing the <link> line makes the compilation work again.
For reference, this is my main_layout.ex
defmodule HologramTutorial.MainLayout do
use Hologram.Component
prop :page_title, :string
end
What might be going on here?
Thank you!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest Hologram Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
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
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security
Our Sponsors
Supporting innovation across the BEAM ecosystem.
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!
Master modern tools, write cleaner code, and tackle real-world challenges.
Producing high quality Elixir screencasts since 2017.
**Building the future of software with AI, trust, and human connection.**
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 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
phcurado
Try removing the sigil
~pfrom your template.or import the verified routes helper under your template file
Then you will be able to use the sigil ~p. More info on phoenix routing guide
Starlet9334
That worked, thank you!
bartblast
Thanks for the solution, @phcurado!
I wanted to add some clarification for anyone who might encounter a similar issue in the future.
You can’t use Phoenix routing-related functionality (like the
~psigil) in Hologram templates, as Hologram has a separate routing system due to fundamental architectural differences.Instead of:
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />The recommended approach in Hologram is:
<link rel="stylesheet" href={asset_path("assets/css/app.css")} />Why
asset_path/1? This helper function automatically appends a digest to the asset path for proper asset fingerprinting, which is essential for cache busting in production environments.While importing verified routes as @phcurado suggested will technically make the compilation error go away, using
asset_path/1is the idiomatic way to handle static assets in Hologram templates.