LiveSocket not mounting after upgrading to Phoenix 1.6

I’ve been upgrading an app to Phoenix 1.6 the past day and half and have hit a snag with LiveView. The new LiveSocket is getting created after the DOM is ready, but it’s not getting mounted.

Other than following the upgrade instructions, I haven’t made any other changes. With phx 1.5.9, the LiveSocket mounts, with phx 1.6 it does not.

Any idea what could be causing this issue?

Prior deps versions:

      {:phoenix, "~> 1.5.9"},
      {:phoenix_ecto, "~> 4.1"},
      {:phoenix_html, "~> 2.11"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_dashboard, "~> 0.4"},
      {:phoenix_live_view, "~> 0.15.7"},
      {:telemetry_metrics, "~> 0.4"},
      {:telemetry_poller, "~> 0.4"},
      {:plug_cowboy, "~> 2.0"},

Current deps versions:

       {:phoenix,
       github: "phoenixframework/phoenix",
       ref: "a29ee77021a3ac41f013188c71aca194ae253821",
       override: true},
      {:phoenix_ecto, "~> 4.4"},
      {:phoenix_html, "~> 3.0.4"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_dashboard, "~> 0.5"},
      {:phoenix_live_view, "~> 0.16.4"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:plug_cowboy, "~> 2.5"},

Due to other issues getting sass, local fonts and Tailwind working with esbuild, I’m still using yarn and webpack, That’s the reason for using a ref a few commits ahead of 1.6.0.

First, I love your youtube channel.
Second, I went through the same yesterday while migrating from 1.5.9 to 1.6.0.

Here are my dependencies:

defp deps do
    [
      {:bcrypt_elixir, "~> 2.0"},
      {:phoenix, "~> 1.6.0"},
      {:phoenix_ecto, "~> 4.4"},
      {:ecto_sql, "~> 3.7"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_live_view, "~> 0.16.4"},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_html, "~> 3.0"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_dashboard, "~> 0.5"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.11"},
      {:jason, "~> 1.0"},
      {:plug_cowboy, "~> 2.5"},
      {:nimble_csv, "~> 1.1"},
      {:tzdata, "~> 1.1"},
      {:timex, "~> 3.7"},
      {:bodyguard, "~> 2.4"},
      {:bamboo_smtp, "~> 4.1.0"},
      {:pdf_generator, "~> 0.6.2"},
      {:bbmustache, "~> 1.12"},
      {:statistex, "~> 1.0"},
      {:csv, "~> 2.4"}
    ]
  end

After updating my dependencies, I simply went into my assets folder and ran: npm update at which point my app compiled and launched without issues.

2 Likes