Hologram compiler fails when adding stylesheet to <head> tag

Elixir Framework Forums Hologram Forum
, ,
1

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!

2

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

2 Likes
3

That worked, thank you!

4

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.

4 Likes
5

A post was merged into an existing topic: Navigating between LiveView and Hologram pages