function Phoenix.LiveView.HTMLEngine.init/1 is undefined or private

[treshenry]

Just set up a brand new Phoenix 1.7.1 project and went through the readme steps and post-gen instructions to setup phoenix_storybook.

Here's the storybook entry from mix.lock

"phoenix_storybook": {:hex, :phoenix_storybook, "0.5.0", "c70ae33f53adf54e0cb99271e7617cd5160d1b6780fc7bc50b6da2893bfbde3c", [:mix], [{:earmark, "~> 1.4", [hex: :earmark, repo: "hexpm", optional: false]}, {:heroicons, "~> 0.5", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "~> 1.3", [hex: :jason, repo: "hexpm", optional: true]}, {:makeup_eex, "~> 0.1.0", [hex: :makeup_eex, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.18", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}], "hexpm", "156a8c033819584cf9e79d04fefa864cf71f31e53afc02b5eaa14bf716e9224e"},

The /storybook endpoint seems to work fine but clicking on any of the components in "Core components" results in (this was clicking on "Button" but it's the same for all of them):

[error] GenServer #PID<0.1000.0> terminating
** (UndefinedFunctionError) function Phoenix.LiveView.HTMLEngine.init/1 is undefined or private
    (phoenix_live_view 0.18.17) Phoenix.LiveView.HTMLEngine.init([engine: Phoenix.LiveView.HTMLEngine, caller: #Macro.Env<aliases: [{LiveViewEngine, Phoenix.LiveView.Engine}, {HTMLEngine, Phoenix.LiveView.HTMLEngine}, {RenderingContext, PhoenixStorybook.Rendering.RenderingContext}, {RenderingVariation, PhoenixStorybook.Rendering.RenderingVariation}, {TemplateHelpers, PhoenixStorybook.TemplateHelpers}], context: nil, context_modules: [PhoenixStorybook.Rendering.ComponentRenderer], file: "/Users/tres/Documents/src/sbtest/deps/phoenix_storybook/lib/phoenix_storybook/rendering/component_renderer.ex", function: {:render_component_heex, 3}, functions: [{Kernel, [!=: 2, !==: 2, *: 2, **: 2, +: 1, +: 2, ++: 2, -: 1, -: 2, --: 2, /: 2, <: 2, <=: 2, ==: 2, ===: 2, =~: 2, >: 2, >=: 2, abs: 1, apply: 2, apply: 3, binary_part: 3, binary_slice: 2, binary_slice: 3, bit_size: 1, byte_size: 1, ceil: 1, div: 2, elem: 2, exit: 1, floor: 1, function_exported?: 3, get_and_update_in: 3, get_in: 2, hd: 1, inspect: 1, inspect: 2, is_atom: 1, is_binary: 1, ...]}], lexical_tracker: nil, line: 142, macro_aliases: [], macros: [{Kernel, [!: 1, &&: 2, ..: 0, ..: 2, ..//: 3, <>: 2, @: 1, alias!: 1, and: 2, binding: 0, binding: 1, dbg: 0, dbg: 1, dbg: 2, def: 1, def: 2, defdelegate: 2, defexception: 1, defguard: 1, defguardp: 1, defimpl: 2, defimpl: 3, defmacro: 1, defmacro: 2, defmacrop: 1, defmacrop: 2, defmodule: 2, defoverridable: 1, defp: 1, defp: 2, defprotocol: 2, defstruct: 1, destructure: 2, get_and_update_in: 2, if: 2, ...]}], module: PhoenixStorybook.Rendering.ComponentRenderer, requires: [Application, Kernel, Kernel.Typespec], ...>, source: "<.button  id=\"button-single-default\" >\n  Button\n</.button>\n"])
    (eex 1.14.3) lib/eex/compiler.ex:295: EEx.Compiler.compile/2
    (phoenix_storybook 0.5.0) lib/phoenix_storybook/rendering/component_renderer.ex:142: PhoenixStorybook.Rendering.ComponentRenderer.render_component_heex/3
    (phoenix_storybook 0.5.0) lib/phoenix_storybook/live/story_live.ex:419: anonymous fn/3 in PhoenixStorybook.StoryLive.render_content/2
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:398: Phoenix.LiveView.Diff.traverse/7
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:571: anonymous fn/3 in Phoenix.LiveView.Diff.traverse_comprehension/5
    (elixir 1.14.3) lib/enum.ex:1780: Enum."-map_reduce/3-lists^mapfoldl/2-0-"/3
    (elixir 1.14.3) lib/enum.ex:1780: Enum."-map_reduce/3-lists^mapfoldl/2-0-"/3
    (elixir 1.14.3) lib/enum.ex:1780: Enum."-map_reduce/3-lists^mapfoldl/2-0-"/3
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:492: Phoenix.LiveView.Diff.traverse/7
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:544: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
    (elixir 1.14.3) lib/enum.ex:2468: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:396: Phoenix.LiveView.Diff.traverse/7
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:544: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
    (elixir 1.14.3) lib/enum.ex:2468: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:373: Phoenix.LiveView.Diff.traverse/7
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:544: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
    (elixir 1.14.3) lib/enum.ex:2468: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:373: Phoenix.LiveView.Diff.traverse/7
    (phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:139: Phoenix.LiveView.Diff.render/3
Last message: %Phoenix.Socket.Message{topic: "lv:phx-F0wL6JqUIiGZ_AaH", event: "live_patch", payload: %{"url" => "http://localhost:4000/storybook/core_components/button"}, ref: "9", join_ref: "4"}
State: %{components: {%{1 => {PhoenixStorybook.Sidebar, "sidebar", %{__changed__: %{}, backend_module: SbtestWeb.Storybook, content_flat_list: [%PhoenixStorybook.FolderEntry{name: "Storybook", entries: [%PhoenixStorybook.StoryEntry{path: "/welcome", name: "Welcome Page", icon: {:fa, "hand-wave", :thin}}, %PhoenixStorybook.FolderEntry{name: "Core components", entries: [%PhoenixStorybook.StoryEntry{path: "/core_components/button", name: "Button", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/flash", name: "Flash", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/header", name: "Header", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/input", name: "Input", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/list", name: "List", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/modal", name: "Modal", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/table", name: "Table", icon: nil}], path: "/core_components", icon: nil, open?: false}, %PhoenixStorybook.FolderEntry{name: "Examples", entries: [%PhoenixStorybook.StoryEntry{path: "/examples/core_components", name: "Core Components", icon: nil}], path: "/examples", icon: nil, open?: false}], path: "", icon: {:fa, "book-open", :light, "lsb-mr-1"}, open?: false}, %PhoenixStorybook.StoryEntry{path: "/welcome", name: "Welcome Page", icon: {:fa, "hand-wave", :thin}}, %PhoenixStorybook.FolderEntry{name: "Core components", entries: [%PhoenixStorybook.StoryEntry{path: "/core_components/button", name: "Button", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/flash", name: "Flash", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/header", name: "Header", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/input", name: "Input", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/list", name: "List", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/modal", name: "Modal", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/table", name: "Table", icon: nil}], path: "/core_components", icon: nil, open?: false}, %PhoenixStorybook.StoryEntry{path: "/core_components/button", name: "Button", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/flash", name: "Flash", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/header", name: "Header", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/input", name: "Input", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/list", name: "List", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/modal", name: "Modal", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/table", name: "Table", icon: nil}, %PhoenixStorybook.FolderEntry{name: "Examples", entries: [%PhoenixStorybook.StoryEntry{path: "/examples/core_components", name: "Core Components", icon: nil}], path: "/examples", icon: nil, open?: false}, %PhoenixStorybook.StoryEntry{path: "/examples/core_components", name: "Core Components", icon: nil}], content_tree: [%PhoenixStorybook.FolderEntry{name: "Storybook", entries: [%PhoenixStorybook.StoryEntry{path: "/welcome", name: "Welcome Page", icon: {:fa, "hand-wave", :thin}}, %PhoenixStorybook.FolderEntry{name: "Core components", entries: [%PhoenixStorybook.StoryEntry{path: "/core_components/button", name: "Button", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/flash", name: "Flash", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/header", name: "Header", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/input", name: "Input", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/list", name: "List", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/modal", name: "Modal", icon: nil}, %PhoenixStorybook.StoryEntry{path: "/core_components/table", name: "Table", icon: nil}], path: "/core_components", icon: nil, open?: false}, %PhoenixStorybook.FolderEntry{name: "Examples", entries: [%PhoenixStorybook.StoryEntry{path: "/examples/core_component (truncated)

Let me know if I can provide more information for a repro. Maybe I just missed something in the setup instructions? Could totally be on my end, but I tried twice with the same result.

[justlampin]

@treshenry i can reproduce this with the latest version of phoenix_live_view, which is currently 0.18.17 – it looks like pinning the phoenix_live_view dependency to 0.18.16 will resolve it for now, e.g. in mix.exs:

defp deps do
  [
    {:phoenix_live_view, "== 0.18.16"}
  ]
end

[treshenry]

Yep, that does it. 👍 I can also verify #228 for the core components example (sounds like that one is fixed though and just waiting for release)