Phoenix_live_view: Nested LiveViews – TypeError: Cannot read property 'href' of null
Environment
- Elixir version (elixir -v): 1.9.4
- Phoenix version (mix deps): 1.4.11
- Phoenix LiveView version (mix deps): 0.5.2
- NodeJS version (node -v): 13.6.0
- NPM version (npm -v): 6.13.4
- Operating system: macOS
Actual behavior
Opening a page with nested LiveViews produces the following JS error:
Uncaught TypeError: Cannot read property 'href' of null
at eval [as payload] (phoenix_live_view.js:1)
at e.value (phoenix.js:1)
at e.value (phoenix.js:1)
at e.value (phoenix.js:1)
at e.value (phoenix.js:1)
at e.value (phoenix.js:1)
at e.value (phoenix_live_view.js:1)
at e.value (phoenix_live_view.js:1)
at eval (phoenix_live_view.js:1)
at Array.forEach (<anonymous>)
Which corresponds to this line: https://github.com/phoenixframework/phoenix_live_view/blob/e4c920738da717e4aa44f6c0528fbe19325a744b/assets/js/phoenix_live_view.js#L1072
With Phoenix LiveView v0.4 the same code works fine.
Code
defmodule DemoWeb.ChildLive do
use Phoenix.LiveView
def render(assigns) do
~L"""
<h1>Child</h1>
"""
end
end
defmodule DemoWeb.ParentLive do
use Phoenix.LiveView
def render(assigns) do
~L"""
<div>
Parent
<%= live_render(@socket, DemoWeb.ChildLive, id: :child) %>
</div>
"""
end
end
adriankumpf
All 12 comments
I also encountered this problem with a very similar error message. I found that <%= csrf_meta_tag() %> in the <head> section needs to be included before app.js, otherwise the content of that csrf meta tag cannot be read.
I hope this helps, and will open up a PR for the installation documentation.
alanvardy
on 18 Jan 2020
I have the same issue. Moving <%= csrf_meta_tag() %> before the .js file as @alanvardy suggested didn't helped.
EDIT:
- below is the nested liveview container div (
data-phx-sessionhas 11.275 chars):
<div data-phx-parent-id="phx-A2uqEvM7FyE" data-phx-session="SFMyNTY.g3QAAAACZAAEZGF0YWgCYQJ0AAAABWQAAmlkbQAAAAVuZXdfMWQACnBhcmVudF9waWRnZAANbm9ub2RlQG5vaG9zdAAAA_sAAAAAAGQACHJvb3RfcGlkZ2QADW5vbm9kZUBub2hvc3QAAAP7AAAAAABkAAdzZXNzaW9udAAAAAJtAAAABGZvcm10AAAADGQACl9fc3RydWN0X19kABhFbGl4aXIuUGhvZW5peC5IVE1MLkZvcm1kAAZhY3Rpb25tAAAADS9hZG1pbi9ldmVudHNkAARkYXRhdAAAACRkAAVpbWFnZWQAA25pbGQABmV2ZW50c3QAAAAEZAAPX19jYXJkaW5hbGl0eV9fZAAEbWFueWQACV9fZmllbGRfX2QABmV2ZW50c2QACV9fb3duZXJfX2QAGEVsaXhpci5OZW1vLkV2ZW50cy5FdmVudGQACl9fc3RydWN0X19kACFFbGl4aXIuRWN0by5Bc3NvY2lhdGlvbi5Ob3RMb2FkZWRkAAR5ZWFyZAADbmlsZAAIZW5kX3RpbWVkAANuaWxkAAZpbWFnZXN0AAAABGQAD19fY2FyZGluYWxpdHlfX2QABG1hbnlkAAlfX2ZpZWxkX19kAAZpbWFnZXNkAAlfX293bmVyX19kABhFbGl4aXIuTmVtby5FdmVudHMuRXZlbnRkAApfX3N0cnVjdF9fZAAhRWxpeGlyLkVjdG8uQXNzb2NpYXRpb24uTm90TG9hZGVkZAAIZHVyYXRpb25kAANuaWxkAAxpc19yZWN1cnJpbmdkAANuaWxkAAJpZGQAA25pbGQAC2luc2VydGVkX2F0ZAADbmlsZAAFdGl0bGVkAANuaWxkAAR0YWdzamQAB3VwbG9hZHN0AAAABGQAD19fY2FyZGluYWxpdHlfX2QABG1hbnlkAAlfX2ZpZWxkX19kAAd1cGxvYWRzZAAJX19vd25lcl9fZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAAKX19zdHJ1Y3RfX2QAIUVsaXhpci5FY3RvLkFzc29jaWF0aW9uLk5vdExvYWRlZGQACnN0YXJ0X2RhdGVkAANuaWxkABZkYXlfc2NoZWR1bGVfbG9jYXRpb25zZAADbmlsZAAKX19zdHJ1Y3RfX2QAGEVsaXhpci5OZW1vLkV2ZW50cy5FdmVudGQABHNsdWdkAANuaWxkAAp1cGRhdGVkX2F0ZAADbmlsZAAIX19tZXRhX190AAAABmQACl9fc3RydWN0X19kABtFbGl4aXIuRWN0by5TY2hlbWEuTWV0YWRhdGFkAAdjb250ZXh0ZAADbmlsZAAGcHJlZml4ZAADbmlsZAAGc2NoZW1hZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAAGc291cmNlbQAAAAZldmVudHNkAAVzdGF0ZWQABWJ1aWx0ZAAJcGFyZW50X2lkZAADbmlsZAALZGVzY3JpcHRpb25kAANuaWxkAAx0cmFuc2xhdGlvbnNkAANuaWxkAAVwcmljZWQAA25pbGQACGxvY2F0aW9uZAADbmlsZAAKc3RhcnRfdGltZWQAA25pbGQAC3RpY2tldF9saW5rZAADbmlsZAAMb3JnYW5pemVyX2lkZAADbmlsZAAIZW5kX2RhdGVkAANuaWxkAAtsb2NhdGlvbl9pZGQAA25pbGQACW9yZ2FuaXplcmQAA25pbGQACm9jY3VycmVuY2VkAANuaWxkAApjYXRlZ29yaWVzamQABnJydWxlc2pkAAZwYXJlbnR0AAAABGQAD19fY2FyZGluYWxpdHlfX2QAA29uZWQACV9fZmllbGRfX2QABnBhcmVudGQACV9fb3duZXJfX2QAGEVsaXhpci5OZW1vLkV2ZW50cy5FdmVudGQACl9fc3RydWN0X19kACFFbGl4aXIuRWN0by5Bc3NvY2lhdGlvbi5Ob3RMb2FkZWRkABJkYXlfc2NoZWR1bGVfdGltZXNkAANuaWxkAAdhbGxfZGF5ZAADbmlsZAAFcnJ1bGVkAANuaWxkAAZlcnJvcnNqZAAGaGlkZGVuamQAAmlkbQAAAAVldmVudGQABGltcGxkACtFbGl4aXIuUGhvZW5peC5IVE1MLkZvcm1EYXRhLkVjdG8uQ2hhbmdlc2V0ZAAFaW5kZXhkAANuaWxkAARuYW1lbQAAAAVldmVudGQAB29wdGlvbnNsAAAAA2gCZAAGbWV0aG9kbQAAAARwb3N0aAJkAAVjbGFzc20AAAAIcm93IGNhcmRoAmQACW11bHRpcGFydGQABHRydWVqZAAGcGFyYW1zdAAAAABkAAZzb3VyY2V0AAAAEGQACl9fc3RydWN0X19kABVFbGl4aXIuRWN0by5DaGFuZ2VzZXRkAAZhY3Rpb25kAANuaWxkAAdjaGFuZ2VzdAAAAABkAAtjb25zdHJhaW50c2pkAARkYXRhdAAAACRkAAVpbWFnZWQAA25pbGQABmV2ZW50c3QAAAAEZAAPX19jYXJkaW5hbGl0eV9fZAAEbWFueWQACV9fZmllbGRfX2QABmV2ZW50c2QACV9fb3duZXJfX2QAGEVsaXhpci5OZW1vLkV2ZW50cy5FdmVudGQACl9fc3RydWN0X19kACFFbGl4aXIuRWN0by5Bc3NvY2lhdGlvbi5Ob3RMb2FkZWRkAAR5ZWFyZAADbmlsZAAIZW5kX3RpbWVkAANuaWxkAAZpbWFnZXN0AAAABGQAD19fY2FyZGluYWxpdHlfX2QABG1hbnlkAAlfX2ZpZWxkX19kAAZpbWFnZXNkAAlfX293bmVyX19kABhFbGl4aXIuTmVtby5FdmVudHMuRXZlbnRkAApfX3N0cnVjdF9fZAAhRWxpeGlyLkVjdG8uQXNzb2NpYXRpb24uTm90TG9hZGVkZAAIZHVyYXRpb25kAANuaWxkAAxpc19yZWN1cnJpbmdkAANuaWxkAAJpZGQAA25pbGQAC2luc2VydGVkX2F0ZAADbmlsZAAFdGl0bGVkAANuaWxkAAR0YWdzamQAB3VwbG9hZHN0AAAABGQAD19fY2FyZGluYWxpdHlfX2QABG1hbnlkAAlfX2ZpZWxkX19kAAd1cGxvYWRzZAAJX19vd25lcl9fZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAAKX19zdHJ1Y3RfX2QAIUVsaXhpci5FY3RvLkFzc29jaWF0aW9uLk5vdExvYWRlZGQACnN0YXJ0X2RhdGVkAANuaWxkABZkYXlfc2NoZWR1bGVfbG9jYXRpb25zZAADbmlsZAAKX19zdHJ1Y3RfX2QAGEVsaXhpci5OZW1vLkV2ZW50cy5FdmVudGQABHNsdWdkAANuaWxkAAp1cGRhdGVkX2F0ZAADbmlsZAAIX19tZXRhX190AAAABmQACl9fc3RydWN0X19kABtFbGl4aXIuRWN0by5TY2hlbWEuTWV0YWRhdGFkAAdjb250ZXh0ZAADbmlsZAAGcHJlZml4ZAADbmlsZAAGc2NoZW1hZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAAGc291cmNlbQAAAAZldmVudHNkAAVzdGF0ZWQABWJ1aWx0ZAAJcGFyZW50X2lkZAADbmlsZAALZGVzY3JpcHRpb25kAANuaWxkAAx0cmFuc2xhdGlvbnNkAANuaWxkAAVwcmljZWQAA25pbGQACGxvY2F0aW9uZAADbmlsZAAKc3RhcnRfdGltZWQAA25pbGQAC3RpY2tldF9saW5rZAADbmlsZAAMb3JnYW5pemVyX2lkZAADbmlsZAAIZW5kX2RhdGVkAANuaWxkAAtsb2NhdGlvbl9pZGQAA25pbGQACW9yZ2FuaXplcmQAA25pbGQACm9jY3VycmVuY2VkAANuaWxkAApjYXRlZ29yaWVzamQABnJydWxlc2pkAAZwYXJlbnR0AAAABGQAD19fY2FyZGluYWxpdHlfX2QAA29uZWQACV9fZmllbGRfX2QABnBhcmVudGQACV9fb3duZXJfX2QAGEVsaXhpci5OZW1vLkV2ZW50cy5FdmVudGQACl9fc3RydWN0X19kACFFbGl4aXIuRWN0by5Bc3NvY2lhdGlvbi5Ob3RMb2FkZWRkABJkYXlfc2NoZWR1bGVfdGltZXNkAANuaWxkAAdhbGxfZGF5ZAADbmlsZAAFcnJ1bGVkAANuaWxkAAxlbXB0eV92YWx1ZXNsAAAAAW0AAAAAamQABmVycm9yc2wAAAAIaAJkAAV0aXRsZWgCbQAAAA5jYW4ndCBiZSBibGFua2wAAAABaAJkAAp2YWxpZGF0aW9uZAAIcmVxdWlyZWRqaAJkAARzbHVnaAJtAAAADmNhbid0IGJlIGJsYW5rbAAAAAFoAmQACnZhbGlkYXRpb25kAAhyZXF1aXJlZGpoAmQAC2Rlc2NyaXB0aW9uaAJtAAAADmNhbid0IGJlIGJsYW5rbAAAAAFoAmQACnZhbGlkYXRpb25kAAhyZXF1aXJlZGpoAmQACnN0YXJ0X2RhdGVoAm0AAAAOY2FuJ3QgYmUgYmxhbmtsAAAAAWgCZAAKdmFsaWRhdGlvbmQACHJlcXVpcmVkamgCZAAKc3RhcnRfdGltZWgCbQAAAA5jYW4ndCBiZSBibGFua2wAAAABaAJkAAp2YWxpZGF0aW9uZAAIcmVxdWlyZWRqaAJkAAhlbmRfZGF0ZWgCbQAAAA5jYW4ndCBiZSBibGFua2wAAAABaAJkAAp2YWxpZGF0aW9uZAAIcmVxdWlyZWRqaAJkAAxvcmdhbml6ZXJfaWRoAm0AAAAOY2FuJ3QgYmUgYmxhbmtsAAAAAWgCZAAKdmFsaWRhdGlvbmQACHJlcXVpcmVkamgCZAALbG9jYXRpb25faWRoAm0AAAAOY2FuJ3QgYmUgYmxhbmtsAAAAAWgCZAAKdmFsaWRhdGlvbmQACHJlcXVpcmVkampkAAdmaWx0ZXJzdAAAAABkAAZwYXJhbXN0AAAAAGQAB3ByZXBhcmVqZAAEcmVwb2QAA25pbGQACXJlcG9fb3B0c2pkAAhyZXF1aXJlZGwAAAAIZAAFdGl0bGVkAARzbHVnZAALZGVzY3JpcHRpb25kAApzdGFydF9kYXRlZAAKc3RhcnRfdGltZWQACGVuZF9kYXRlZAAMb3JnYW5pemVyX2lkZAALbG9jYXRpb25faWRqZAAFdHlwZXN0AAAAImQABWltYWdlZAAvRWxpeGlyLk5lbW9XZWIuVXBsb2FkZXJzLkV2ZW50cy5FdmVudEltYWdlLlR5cGVkAAZldmVudHNoAmQABWFzc29jdAAAABBkAApfX3N0cnVjdF9fZAAbRWxpeGlyLkVjdG8uQXNzb2NpYXRpb24uSGFzZAALY2FyZGluYWxpdHlkAARtYW55ZAAIZGVmYXVsdHNqZAAFZmllbGRkAAZldmVudHNkAAdvbl9jYXN0ZAADbmlsZAAJb25fZGVsZXRlZAAHbm90aGluZ2QACm9uX3JlcGxhY2VkAAVyYWlzZWQAB29yZGVyZWRkAAVmYWxzZWQABW93bmVyZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAAJb3duZXJfa2V5ZAACaWRkAAlxdWVyeWFibGVkABhFbGl4aXIuTmVtby5FdmVudHMuRXZlbnRkAAdyZWxhdGVkZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAALcmVsYXRlZF9rZXlkAAlwYXJlbnRfaWRkAAxyZWxhdGlvbnNoaXBkAAVjaGlsZGQABnVuaXF1ZWQABHRydWVkAAV3aGVyZWpkAAR5ZWFyZAAHaW50ZWdlcmQACGVuZF90aW1lZAAEdGltZWQABmltYWdlc2gCZAAFYXNzb2N0AAAAEGQACl9fc3RydWN0X19kABtFbGl4aXIuRWN0by5Bc3NvY2lhdGlvbi5IYXNkAAtjYXJkaW5hbGl0eWQABG1hbnlkAAhkZWZhdWx0c2pkAAVmaWVsZGQABmltYWdlc2QAB29uX2Nhc3RkAANuaWxkAAlvbl9kZWxldGVkAAdub3RoaW5nZAAKb25fcmVwbGFjZWQABXJhaXNlZAAHb3JkZXJlZGQABWZhbHNlZAAFb3duZXJkABhFbGl4aXIuTmVtby5FdmVudHMuRXZlbnRkAAlvd25lcl9rZXlkAAJpZGQACXF1ZXJ5YWJsZWQAGUVsaXhpci5OZW1vLkV2ZW50cy5VcGxvYWRkAAdyZWxhdGVkZAAZRWxpeGlyLk5lbW8uRXZlbnRzLlVwbG9hZGQAC3JlbGF0ZWRfa2V5ZAAIZXZlbnRfaWRkAAxyZWxhdGlvbnNoaXBkAAVjaGlsZGQABnVuaXF1ZWQABHRydWVkAAV3aGVyZWpkAAhkdXJhdGlvbmQAB2ludGVnZXJkAAxpc19yZWN1cnJpbmdkAAdib29sZWFuZAACaWRkAAJpZGQAC2luc2VydGVkX2F0ZAAObmFpdmVfZGF0ZXRpbWVkAAV0aXRsZWQABnN0cmluZ2QABHRhZ3NoAmQABWFzc29jdAAAABFkAApfX3N0cnVjdF9fZAAiRWxpeGlyLkVjdG8uQXNzb2NpYXRpb24uTWFueVRvTWFueWQAC2NhcmRpbmFsaXR5ZAAEbWFueWQACGRlZmF1bHRzamQABWZpZWxkZAAEdGFnc2QACWpvaW5fa2V5c2wAAAACaAJkAAhldmVudF9pZGQAAmlkaAJkAAZ0YWdfaWRkAAJpZGpkAAxqb2luX3Rocm91Z2hkABtFbGl4aXIuTmVtby5FdmVudHMuVGFnRXZlbnRkAAdvbl9jYXN0ZAADbmlsZAAJb25fZGVsZXRlZAAHbm90aGluZ2QACm9uX3JlcGxhY2VkAAVyYWlzZWQAB29yZGVyZWRkAAVmYWxzZWQABW93bmVyZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAAJb3duZXJfa2V5ZAACaWRkAAlxdWVyeWFibGVkABZFbGl4aXIuTmVtby5FdmVudHMuVGFnZAAHcmVsYXRlZGQAFkVsaXhpci5OZW1vLkV2ZW50cy5UYWdkAAxyZWxhdGlvbnNoaXBkAAVjaGlsZGQABnVuaXF1ZWQABWZhbHNlZAAFd2hlcmVqZAAHdXBsb2Fkc2gCZAAFYXNzb2N0AAAAEGQACl9fc3RydWN0X19kABtFbGl4aXIuRWN0by5Bc3NvY2lhdGlvbi5IYXNkAAtjYXJkaW5hbGl0eWQABG1hbnlkAAhkZWZhdWx0c2pkAAVmaWVsZGQAB3VwbG9hZHNkAAdvbl9jYXN0ZAADbmlsZAAJb25fZGVsZXRlZAAHbm90aGluZ2QACm9uX3JlcGxhY2VkAAVyYWlzZWQAB29yZGVyZWRkAAVmYWxzZWQABW93bmVyZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAAJb3duZXJfa2V5ZAACaWRkAAlxdWVyeWFibGVkABlFbGl4aXIuTmVtby5FdmVudHMuVXBsb2FkZAAHcmVsYXRlZGQAGUVsaXhpci5OZW1vLkV2ZW50cy5VcGxvYWRkAAtyZWxhdGVkX2tleWQACGV2ZW50X2lkZAAMcmVsYXRpb25zaGlwZAAFY2hpbGRkAAZ1bmlxdWVkAAR0cnVlZAAFd2hlcmVqZAAKc3RhcnRfZGF0ZWQABGRhdGVkABZkYXlfc2NoZWR1bGVfbG9jYXRpb25zaAJkAAVhcnJheWQABHRpbWVkAARzbHVnZAAnRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50LlRpdGxlU2x1Zy5UeXBlZAAKdXBkYXRlZF9hdGQADm5haXZlX2RhdGV0aW1lZAAJcGFyZW50X2lkZAACaWRkAAtkZXNjcmlwdGlvbmQABnN0cmluZ2QADHRyYW5zbGF0aW9uc2QAA21hcGQABXByaWNlZAAHaW50ZWdlcmQACGxvY2F0aW9uaAJkAAVhc3NvY3QAAAAPZAAKX19zdHJ1Y3RfX2QAIUVsaXhpci5FY3RvLkFzc29jaWF0aW9uLkJlbG9uZ3NUb2QAC2NhcmRpbmFsaXR5ZAADb25lZAAIZGVmYXVsdHNqZAAFZmllbGRkAAhsb2NhdGlvbmQAB29uX2Nhc3RkAANuaWxkAApvbl9yZXBsYWNlZAAFcmFpc2VkAAdvcmRlcmVkZAAFZmFsc2VkAAVvd25lcmQAGEVsaXhpci5OZW1vLkV2ZW50cy5FdmVudGQACW93bmVyX2tleWQAC2xvY2F0aW9uX2lkZAAJcXVlcnlhYmxlZAAbRWxpeGlyLk5lbW8uRXZlbnRzLkxvY2F0aW9uZAAHcmVsYXRlZGQAG0VsaXhpci5OZW1vLkV2ZW50cy5Mb2NhdGlvbmQAC3JlbGF0ZWRfa2V5ZAACaWRkAAxyZWxhdGlvbnNoaXBkAAZwYXJlbnRkAAZ1bmlxdWVkAAR0cnVlZAAFd2hlcmVqZAAKc3RhcnRfdGltZWQABHRpbWVkAAt0aWNrZXRfbGlua2QABnN0cmluZ2QADG9yZ2FuaXplcl9pZGQAAmlkZAAIZW5kX2RhdGVkAARkYXRlZAALbG9jYXRpb25faWRkAAJpZGQACW9yZ2FuaXplcmgCZAAFYXNzb2N0AAAAD2QACl9fc3RydWN0X19kACFFbGl4aXIuRWN0by5Bc3NvY2lhdGlvbi5CZWxvbmdzVG9kAAtjYXJkaW5hbGl0eWQAA29uZWQACGRlZmF1bHRzamQABWZpZWxkZAAJb3JnYW5pemVyZAAHb25fY2FzdGQAA25pbGQACm9uX3JlcGxhY2VkAAVyYWlzZWQAB29yZGVyZWRkAAVmYWxzZWQABW93bmVyZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAAJb3duZXJfa2V5ZAAMb3JnYW5pemVyX2lkZAAJcXVlcnlhYmxlZAAcRWxpeGlyLk5lbW8uRXZlbnRzLk9yZ2FuaXplcmQAB3JlbGF0ZWRkABxFbGl4aXIuTmVtby5FdmVudHMuT3JnYW5pemVyZAALcmVsYXRlZF9rZXlkAAJpZGQADHJlbGF0aW9uc2hpcGQABnBhcmVudGQABnVuaXF1ZWQABHRydWVkAAV3aGVyZWpkAApvY2N1cnJlbmNlZAAObmFpdmVfZGF0ZXRpbWVkAApjYXRlZ29yaWVzaAJkAAVhc3NvY3QAAAARZAAKX19zdHJ1Y3RfX2QAIkVsaXhpci5FY3RvLkFzc29jaWF0aW9uLk1hbnlUb01hbnlkAAtjYXJkaW5hbGl0eWQABG1hbnlkAAhkZWZhdWx0c2pkAAVmaWVsZGQACmNhdGVnb3JpZXNkAAlqb2luX2tleXNsAAAAAmgCZAAIZXZlbnRfaWRkAAJpZGgCZAALY2F0ZWdvcnlfaWRkAAJpZGpkAAxqb2luX3Rocm91Z2hkACBFbGl4aXIuTmVtby5FdmVudHMuQ2F0ZWdvcnlFdmVudGQAB29uX2Nhc3RkAANuaWxkAAlvbl9kZWxldGVkAAdub3RoaW5nZAAKb25fcmVwbGFjZWQABXJhaXNlZAAHb3JkZXJlZGQABWZhbHNlZAAFb3duZXJkABhFbGl4aXIuTmVtby5FdmVudHMuRXZlbnRkAAlvd25lcl9rZXlkAAJpZGQACXF1ZXJ5YWJsZWQAG0VsaXhpci5OZW1vLkV2ZW50cy5DYXRlZ29yeWQAB3JlbGF0ZWRkABtFbGl4aXIuTmVtby5FdmVudHMuQ2F0ZWdvcnlkAAxyZWxhdGlvbnNoaXBkAAVjaGlsZGQABnVuaXF1ZWQABWZhbHNlZAAFd2hlcmVqZAAGcnJ1bGVzaAJkAAVhc3NvY3QAAAAQZAAKX19zdHJ1Y3RfX2QAG0VsaXhpci5FY3RvLkFzc29jaWF0aW9uLkhhc2QAC2NhcmRpbmFsaXR5ZAAEbWFueWQACGRlZmF1bHRzamQABWZpZWxkZAAGcnJ1bGVzZAAHb25fY2FzdGQAA25pbGQACW9uX2RlbGV0ZWQACmRlbGV0ZV9hbGxkAApvbl9yZXBsYWNlZAAGZGVsZXRlZAAHb3JkZXJlZGQABWZhbHNlZAAFb3duZXJkABhFbGl4aXIuTmVtby5FdmVudHMuRXZlbnRkAAlvd25lcl9rZXlkAAJpZGQACXF1ZXJ5YWJsZWQAGEVsaXhpci5OZW1vLkV2ZW50cy5ScnVsZWQAB3JlbGF0ZWRkABhFbGl4aXIuTmVtby5FdmVudHMuUnJ1bGVkAAtyZWxhdGVkX2tleWQACGV2ZW50X2lkZAAMcmVsYXRpb25zaGlwZAAFY2hpbGRkAAZ1bmlxdWVkAAR0cnVlZAAFd2hlcmVqZAAGcGFyZW50aAJkAAVhc3NvY3QAAAAPZAAKX19zdHJ1Y3RfX2QAIUVsaXhpci5FY3RvLkFzc29jaWF0aW9uLkJlbG9uZ3NUb2QAC2NhcmRpbmFsaXR5ZAADb25lZAAIZGVmYXVsdHNqZAAFZmllbGRkAAZwYXJlbnRkAAdvbl9jYXN0ZAADbmlsZAAKb25fcmVwbGFjZWQABXJhaXNlZAAHb3JkZXJlZGQABWZhbHNlZAAFb3duZXJkABhFbGl4aXIuTmVtby5FdmVudHMuRXZlbnRkAAlvd25lcl9rZXlkAAlwYXJlbnRfaWRkAAlxdWVyeWFibGVkABhFbGl4aXIuTmVtby5FdmVudHMuRXZlbnRkAAdyZWxhdGVkZAAYRWxpeGlyLk5lbW8uRXZlbnRzLkV2ZW50ZAALcmVsYXRlZF9rZXlkAAJpZGQADHJlbGF0aW9uc2hpcGQABnBhcmVudGQABnVuaXF1ZWQABHRydWVkAAV3aGVyZWpkABJkYXlfc2NoZWR1bGVfdGltZXNoAmQABWFycmF5ZAAEdGltZWQAB2FsbF9kYXlkAAdib29sZWFuZAAFcnJ1bGVoAmQABWFycmF5ZAADbWFwZAAGdmFsaWQ_ZAAFZmFsc2VkAAt2YWxpZGF0aW9uc2ptAAAAAmlkbQAAAAVuZXdfMWQABHZpZXdkACpFbGl4aXIuTmVtb1dlYi5FdmVudExpdmUuRm9ybVNjaGVkdWxlUlJVTEVkAAZzaWduZWRuBgCqImy_bwE.peBhfYYUr1zdXU_YTOHG7XNKb8517bttvX_FdQrpKp0" data-phx-static="" data-phx-view="EventLive.FormScheduleRRULE" id="new_1" class="phx-disconnected"></div>
- The
mountcallback in the nested liveview doesn't even get called
sfusato
on 19 Jan 2020
Can someone please provide a sample application that reproduces the error? Thank you.
josevalim
on 19 Jan 2020
sfusato
on 19 Jan 2020
it seems this issue started to happen after this change: https://github.com/phoenixframework/phoenix_live_view/commit/51b147f3d8264a91b2c948c943669ffcef8efda6 which is a fix for this PR: https://github.com/phoenixframework/phoenix_live_view/pull/437. I'm not completely sure about this solution, but if we change this line:
To:
this.href || this.liveSocket.href
it works on the project sent by @sfusato. I'm not sure about that because it seems that this.main is present only when a router is given:
My question to validate this solution: Is there any change this.liveSocket.main.href return a different url? if so, we might need to check for that as well or proper track how the href is sent.
feliperenan
on 20 Jan 2020
@feliperenan does anything break if we don't send || this.liveSocket.main.href at all? You are not supposed to receive the parent href anyway. Child live views have no access to URLs.
josevalim
on 20 Jan 2020
Removing this the child can't mount anymore:
iex(6)> [error] GenServer #PID<0.1894.0> terminating
** (MatchError) no match of right hand side value: %{"params" => %{"_csrf_token" => "GUExBQlFDw1ZJCU5KylQOSRBNGAOMh0TnpTkz7u4kUOtaF1hkrA2Afsj"}, "session" => "SFMyNTY.g3QAAAACZAAEZGF0YWgCYQJ0AAAABWQAAmlkbQAAAAVjaGlsZGQACnBhcmVudF9waWRnZAANbm9ub2RlQG5vaG9zdAAAB1wAAAAAAGQACHJvb3RfcGlkZ2QADW5vbm9kZUBub2hvc3QAAAdcAAAAAABkAAdzZXNzaW9udAAAAABkAAR2aWV3ZAAwRWxpeGlyLlBoeExpdmVWaWV3MDUyTmVzdGVkTGl2ZXZpZXdXZWIuQ2hpbGRMaXZlZAAGc2lnbmVkbgYAxqBVxG8B.mDC5apraKKEPjrXSp8GOEbWwqwwDuvyFsq_BeKpbj1k", "static" => nil}
(phoenix_live_view) lib/phoenix_live_view/channel.ex:516: Phoenix.LiveView.Channel.verified_mount/4
(phoenix_live_view) lib/phoenix_live_view/channel.ex:34: Phoenix.LiveView.Channel.handle_info/2
(stdlib) gen_server.erl:637: :gen_server.try_dispatch/4
(stdlib) gen_server.erl:711: :gen_server.handle_msg/6
(stdlib) proc_lib.erl:249: :proc_lib.init_p_do_apply/3
Last message: {:mount, Phoenix.LiveView.Channel}
State: {%{"params" => %{"_csrf_token" => "GUExBQlFDw1ZJCU5KylQOSRBNGAOMh0TnpTkz7u4kUOtaF1hkrA2Afsj"}, "session" => "SFMyNTY.g3QAAAACZAAEZGF0YWgCYQJ0AAAABWQAAmlkbQAAAAVjaGlsZGQACnBhcmVudF9waWRnZAANbm9ub2RlQG5vaG9zdAAAB1wAAAAAAGQACHJvb3RfcGlkZ2QADW5vbm9kZUBub2hvc3QAAAdcAAAAAABkAAdzZXNzaW9udAAAAABkAAR2aWV3ZAAwRWxpeGlyLlBoeExpdmVWaWV3MDUyTmVzdGVkTGl2ZXZpZXdXZWIuQ2hpbGRMaXZlZAAGc2lnbmVkbgYAxqBVxG8B.mDC5apraKKEPjrXSp8GOEbWwqwwDuvyFsq_BeKpbj1k", "static" => nil}, {#PID<0.1880.0>, #Reference<0.2041456244.2422210561.52920>}, %Phoenix.Socket{assigns: %{}, channel: Phoenix.LiveView.Channel, channel_pid: nil, endpoint: PhxLiveView052NestedLiveviewWeb.Endpoint, handler: Phoenix.LiveView.Socket, id: nil, join_ref: "9", joined: false, private: %{session: %{"_csrf_token" => "w1ensrz92qjMJoaQO3uROTny"}}, pubsub_server: PhxLiveView052NestedLiveview.PubSub, ref: nil, serializer: Phoenix.Socket.V2.JSONSerializer, topic: "lv:child", transport: :websocket, transport_pid: #PID<0.1880.0>}}
[error] an exception was raised:
** (MatchError) no match of right hand side value: %{"params" => %{"_csrf_token" => "GUExBQlFDw1ZJCU5KylQOSRBNGAOMh0TnpTkz7u4kUOtaF1hkrA2Afsj"}, "session" => "SFMyNTY.g3QAAAACZAAEZGF0YWgCYQJ0AAAABWQAAmlkbQAAAAVjaGlsZGQACnBhcmVudF9waWRnZAANbm9ub2RlQG5vaG9zdAAAB1wAAAAAAGQACHJvb3RfcGlkZ2QADW5vbm9kZUBub2hvc3QAAAdcAAAAAABkAAdzZXNzaW9udAAAAABkAAR2aWV3ZAAwRWxpeGlyLlBoeExpdmVWaWV3MDUyTmVzdGVkTGl2ZXZpZXdXZWIuQ2hpbGRMaXZlZAAGc2lnbmVkbgYAxqBVxG8B.mDC5apraKKEPjrXSp8GOEbWwqwwDuvyFsq_BeKpbj1k", "static" => nil}
(phoenix_live_view) lib/phoenix_live_view/channel.ex:516: Phoenix.LiveView.Channel.verified_mount/4
(phoenix_live_view) lib/phoenix_live_view/channel.ex:34: Phoenix.LiveView.Channel.handle_info/2
(stdlib) gen_server.erl:637: :gen_server.try_dispatch/4
(stdlib) gen_server.erl:711: :gen_server.handle_msg/6
(stdlib) proc_lib.erl:249: :proc_lib.init_p_do_apply/3
feliperenan
on 20 Jan 2020
@feliperenan thanks, can you please try master? And if it works, can you please send a PR that fixes JS?
josevalim
on 20 Jan 2020
There is a pattern match on the URL that is sent to the Utils.live_link_info!/2
if we handle this there somehow, we might fix the issue a well:
%{"params" => connect_params} = params
# not sure what add as default
url = Map.get(params, "url", "/")
Yeah, that's what I did in master :)
josevalim
on 20 Jan 2020
😄1
@josevalim it's fixed. At least I couldn't reproduce the issue anymore. :tada:
feliperenan
on 20 Jan 2020
Fantastic, please send a PR and I will merge it ASAP!
josevalim
on 20 Jan 2020
👍3
Was this page helpful?
0 / 5 - 0 ratings
Related issues
lukaszsamson
·
5Comments
josevalim
·
3Comments
morgz
·
5Comments
tmepple
·
4Comments
alexgaribay
·
4Comments
Most helpful comment
Fantastic, please send a PR and I will merge it ASAP!