diff --git a/assets/js/phoenix_live_view/dom_patch.js b/assets/js/phoenix_live_view/dom_patch.js index 664e9c836..135fb9184 100644 --- a/assets/js/phoenix_live_view/dom_patch.js +++ b/assets/js/phoenix_live_view/dom_patch.js @@ -18,6 +18,7 @@ import { import { detectDuplicateIds, + detectInvalidStreamInserts, isCid } from "./utils" @@ -341,6 +342,7 @@ export default class DOMPatch { if(liveSocket.isDebugEnabled()){ detectDuplicateIds() + detectInvalidStreamInserts(this.streamInserts) // warn if there are any inputs named "id" Array.from(document.querySelectorAll("input[name=id]")).forEach(node => { if(node.form){ diff --git a/assets/js/phoenix_live_view/utils.js b/assets/js/phoenix_live_view/utils.js index 1eda3960f..acf6f96ff 100644 --- a/assets/js/phoenix_live_view/utils.js +++ b/assets/js/phoenix_live_view/utils.js @@ -23,6 +23,17 @@ export function detectDuplicateIds(){ } } +export function detectInvalidStreamInserts(inserts){ + const errors = new Set() + Object.keys(inserts).forEach((id) => { + const streamEl = document.getElementById(id) + if(streamEl.parentNode.getAttribute("phx-update") !== "stream"){ + errors.add(`The stream container with id "${streamEl.parentNode.id}" is missing the phx-update="stream" attribute. Ensure it is set for streams to work properly.`) + } + }) + errors.forEach(error => console.error(error)) +} + export let debug = (view, kind, msg, obj) => { if(view.liveSocket.isDebugEnabled()){ console.log(`${view.id} ${kind}: ${msg} - `, obj)