I am creating a simple blogapp with a minimal frontend in phoenix liveview but I keep getting this error in my layouts.ex file.
mix compile
Compiling 3 files (.ex)
error: module Phoenix.LiveView.HTML is not loaded and could not be found
lib/blogapp_web/components/layouts.ex:8: BlogappWeb.Layouts (module)
== Compilation error in file lib/blogapp_web/components/layouts.ex ==
** (CompileError) lib/blogapp_web/components/layouts.ex: cannot compile module BlogappWeb.Layouts (errors have been logged)
This is how my layouts.ex file looks like
defmodule BlogappWeb.Layouts do
@moduledoc """
This module holds different layouts used by your application.
"""
use BlogappWeb, :html
import Phoenix.HTML
import Phoenix.LiveView.HTML -( The error occurs in this line - module Phoenix.LiveView.HTML is not loaded and could not be found. This may be happening because the module you are trying to load directly or indirectly depends on the current module)
embed_templates "layouts/*"
end
phoenix 1.7.14 (Hex package) (mix)
locked at 1.7.14 (phoenix) c7859bc5
phoenix_ecto 4.6.2 (Hex package) (mix)
locked at 4.6.2 (phoenix_ecto) 3f94d025
phoenix_html 4.1.1 (Hex package) (mix)
locked at 4.1.1 (phoenix_html) f2f2df5a
phoenix_live_dashboard 0.8.4 (Hex package) (mix)
locked at 0.8.4 (phoenix_live_dashboard) 2984aae9
phoenix_live_reload 1.5.3 (Hex package) (mix)
locked at 1.5.3 (phoenix_live_reload) b4ec9cd7
phoenix_live_view 1.0.0-rc.6 (Hex package) (mix)
locked at 1.0.0-rc.6 (phoenix_live_view) e56e4f16
phoenix_pubsub 2.1.3 (Hex package) (mix)
locked at 2.1.3 (phoenix_pubsub) bba06bc1
phoenix_template 1.0.4 (Hex package) (mix)
locked at 1.0.4 (phoenix_template) 2c0c81f0
Here are the steps for creating the blog app
Create a new Phoenix project:
Ran mix phx.new blogapp --live to scaffold a new Phoenix LiveView project.
Install dependencies
Jumped into the project directory with cd blogapp and ran mix deps.get to fetch all necessary dependencies.
Configure the database
Updated config/dev.exs to use MySQL with the appropriate credentials.
Created and migrated the database with mix ecto.create and mix ecto.migrate.
Update project dependencies
Added and updated necessary dependencies in mix.exs including Phoenix LiveView and Phoenix HTML
Create and customize templates and components
Set up .heex templates and LiveView components for various parts of the app like layouts, navigation, and content areas.
Resolve CSRF and LiveView imports
Imported Plug.CSRFProtection for CSRF protection in forms and templates.
Updated lib/blogapp_web/components/layouts.ex:
Added use Phoenix.Component for live component support.
Imported Phoenix.LiveView.Helpers and Phoenix.HTML to use functions like csrf_meta_tag.
Hello @Alex-Njoroge , the extra step of importing the helpers on the layouts file might not be necessary as phoenix already imports the helpers by default. Here is the default lib/blogapp_web.ex file which includes the helpers
Was there any specific reason you wanted to include the Phoenix.LiveView.HTML module?
defmodule BlogappWeb do
@moduledoc """
The entrypoint for defining your web interface, such
as controllers, components, channels, and so on.
This can be used in your application as:
use BlogappWeb, :controller
use BlogappWeb, :html
The definitions below will be executed for every controller,
component, etc, so keep them short and clean, focused
on imports, uses and aliases.
Do NOT define functions inside the quoted expressions
below. Instead, define additional modules and import
those modules here.
"""
def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
def router do
quote do
use Phoenix.Router, helpers: false
# Import common connection and controller functions to use in pipelines
import Plug.Conn
import Phoenix.Controller
import Phoenix.LiveView.Router
end
end
def channel do
quote do
use Phoenix.Channel
end
end
def controller do
quote do
use Phoenix.Controller,
formats: [:html, :json],
layouts: [html: BlogappWeb.Layouts]
import Plug.Conn
import BlogappWeb.Gettext
unquote(verified_routes())
end
end
def live_view do
quote do
use Phoenix.LiveView,
layout: {BlogappWeb.Layouts, :app}
unquote(html_helpers())
end
end
def live_component do
quote do
use Phoenix.LiveComponent
unquote(html_helpers())
end
end
def html do
quote do
use Phoenix.Component
# Import convenience functions from controllers
import Phoenix.Controller,
only: [get_csrf_token: 0, view_module: 1, view_template: 1]
# Include general helpers for rendering HTML
unquote(html_helpers())
end
end
defp html_helpers do
quote do
# HTML escaping functionality
import Phoenix.HTML
# Core UI components and translation
import BlogappWeb.CoreComponents
import BlogappWeb.Gettext
# Shortcut for generating JS commands
alias Phoenix.LiveView.JS
# Routes generation with the ~p sigil
unquote(verified_routes())
end
end
def verified_routes do
quote do
use Phoenix.VerifiedRoutes,
endpoint: BlogappWeb.Endpoint,
router: BlogappWeb.Router,
statics: BlogappWeb.static_paths()
end
end
@doc """
When used, dispatch to the appropriate controller/view/etc.
"""
defmacro __using__(which) when is_atom(which) do
apply(__MODULE__, which, [])
end
end
Hello Sigu. It’s great to see you in this side as well.
I dont have a specific reason for using the Phoenix.LiveView.HTML module. The frontend for the blogapp was not working and I was just trying a couple of options to make it work. It was a suggestion from chatgpt and I went with it.
mix compile
Compiling 2 files (.ex)
error: module Phoenix.LiveView.HTML is not loaded and could not be found
lib/blogapp_web/layouts.ex:13: BlogappWeb.Layouts (module)
== Compilation error in file lib/blogapp_web/layouts.ex ==
** (CompileError) lib/blogapp_web/layouts.ex: cannot compile module BlogappWeb.Layouts (errors have been logged)
Here is the code in the lib/blogapp_web/layouts.ex file
defmodule BlogappWeb.Layouts do @moduledoc “”"
This module holds different layouts used by your application.
See the layouts directory for all templates available.
The “root” layout is a skeleton rendered as part of the
application router. The “app” layout is set as the default
layout on both use BlogappWeb, :controller and use BlogappWeb, :live_view.
“”"
use BlogappWeb, :html
import Phoenix.HTML
import Phoenix.LiveView.HTML - The error is here in the import Phoenix.LiveView.HTML
You are right about gpt being out of date. The last versions of erlang, elixir, and phoenix were as follows: I was trained on Elixir 1.12.3, Erlang/OTP 24, and Phoenix 1.6.
Was this template generated like this or you changed something in here. I can also see that you have phoenix 1.7 on your mix file, did you upgrade it yourself?
