Phoenix liveview import not working: error: module Phoenix.LiveView.HTML is not loaded and could not be found

Hi @Alex-Njoroge to answer this sort of question we need some basic information:

1. Can you provide the output of mix deps|grep phoenix, we need to know which versions of Phoenix and Phoenix LiveView are you running.
2. How did you make the application?

mix deps|grep phoenix

• 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.

As a quick sanity check, can you rm -rf _build and try a clean build from there?

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

Yes, I tried this as well but the errors keep persisting.

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.

If there is a way you can suggest for me to successfully implement the frontend, I would greatly appreciate.

That response from gpt is from old version of liveview before it was intergrated into the phkenix generator.

Cal you provide the error you are trying to solve?

these were the errors I was getting

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

embed_templates “layouts/*”
end