HEEX文件注释代码触发HTML解析错误的问题求助

问题详情 #

编译时出现以下错误：

macbook:pen yuchen$ mix compile
Compiling 1 file (.ex)

== Compilation error in file lib/pen_web/views/login_view.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/pen_web/templates/login/show.html.heex:11:42: expected closing `"` for attribute value

Make sure the attribute is properly closed. This may also happen if
there is an EEx interpolation inside a tag, which is not supported.
Instead of

    <div <%= @some_attributes %>>
    </div>

do

    <div {@some_attributes}>
    </div>
Where @some_attributes must be a keyword list or a map.

    (phoenix_live_view 0.17.11) lib/phoenix_live_view/html_tokenizer.ex:487: Phoenix.LiveView.HTMLTokenizer.handle_attr_value_quote/7
    (phoenix_live_view 0.17.11) lib/phoenix_live_view/html_engine.ex:122: Phoenix.LiveView.HTMLEngine.handle_text/3
    (eex 1.13.4) lib/eex/compiler.ex:49: EEx.Compiler.generate_buffer/4
    (eex 1.13.4) lib/eex/compiler.ex:82: EEx.Compiler.generate_buffer/4
    (phoenix_view 1.1.2) lib/phoenix/template.ex:419: Phoenix.Template.compile/3
    (phoenix_view 1.1.2) lib/phoenix/template.ex:197: anonymous fn/4 in Phoenix.Template."MACRO-__before_compile__"/2
    (elixir 1.13.4) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_view 1.1.2) expanding macro: Phoenix.Template.__before_compile__/1
** (exit) shutdown: 1
    (mix 1.13.4) lib/mix/tasks/compile.all.ex:78: Mix.Tasks.Compile.All.compile/4
    (mix 1.13.4) lib/mix/tasks/compile.all.ex:59: Mix.Tasks.Compile.All.with_logger_app/2
    (mix 1.13.4) lib/mix/tasks/compile.all.ex:36: Mix.Tasks.Compile.All.run/1
    (mix 1.13.4) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
    (mix 1.13.4) lib/mix/tasks/compile.ex:131: Mix.Tasks.Compile.run/1
    (mix 1.13.4) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
    (iex 1.13.4) lib/iex/helpers.ex:107: IEx.Helpers.recompile/1

相关文件内容：

show.html.heex #

<h2>Log in</h2>
<%= form_tag(Routes.login_path(Endpoint, :create)) do %>
  <div class="form-group">
    <label for="username">Username or Email</label>
    <input id="username" type="text" class="form-control" name="username">
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <.ignore>
    <span style="float: right;"><a href="<%= Routes.password_reset_path(Endpoint, :show) %>">Forgot your password?</a></span>
    <./ignore>
    <input id="password" type="password" class="form-control" name="password">
  </div>
  <button type="submit" class="btn btn-primary">Log in</button>

  <br><br>

<% end %>

PenWeb.HeexIgnore #

defmodule PenWeb.HeexIgnore do
  use Phoenix.Component

  def ignore(assigns), do: ~H""
end

Pen_web.ex（相关片段） #

defp view_helpers do
  quote do
    # Use all HTML functionality (forms, tags, etc)
    use Phoenix.HTML

    # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
    import Phoenix.LiveView.Helpers

    # Import basic rendering functionality (render, render_layout, etc)
    import Phoenix.View

    import PenWeb.ErrorHelpers
    import PenWeb.Gettext
    alias PenWeb.Router.Helpers, as: Routes
    alias PenWeb.{Endpoint, Router}
    import PenWeb.HeexIgnore
  end
end

问题原因 #

HEEX解析器在处理自定义组件（如<.ignore>）包裹的内容时，会先尝试解析内部的HTML和语法。你在<a>标签的href属性里使用了旧的EEx插值写法<%= ... %>，而HEEX不支持在属性值中嵌套这种语法，必须使用HEEX的{}插值语法，因此触发了“属性值缺少闭合引号”的解析错误。

解决方案 #

提供两种可行的解决方式：

方案一：修改组件内代码为HEEX语法 #

将<a>标签的href属性改为HEEX支持的插值格式，即使内容被<.ignore>组件忽略，解析器也能正确处理：

<.ignore>
<span style="float: right;"><a href={Routes.password_reset_path(Endpoint, :show)}>Forgot your password?</a></span>
<./ignore>

方案二：使用标准HTML注释替代自定义组件 #

直接用HTML注释<!-- -->包裹需要隐藏的代码，HEEX会忽略注释内的所有内容，不会进行语法解析：

<!--
<span style="float: right;"><a href="<%= Routes.password_reset_path(Endpoint, :show) %>">Forgot your password?</a></span>
-->

两种方案都能解决编译错误，方案二更简洁，无需依赖自定义组件。

内容的提问来源于stack exchange，提问作者Chen Yu