Starlet9334
Hologram compiler fails when adding stylesheet to <head> tag
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!
Marked As Solved
phcurado
Try removing the sigil ~p from your template.
<link phx-track-static rel="stylesheet" href="/assets/css/app.css" />
or import the verified routes helper under your template file
defmodule MyApp.MainLayout do
use Hologram.Component
use MyAppWeb, :verified_routes
## ...
end
Then you will be able to use the sigil ~p. More info on phoenix routing guide
Also Liked
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 ~p sigil) 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/1 is the idiomatic way to handle static assets in Hologram templates.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest Hologram Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Courses that'll move you from confusion to "Aha, now I get it!"