Invalid value used as weak map key
anywhichway opened this issue · comments
This very simple example results in an error. I am probably doing something very simple wrong, but I sure can't figure out what. I have attempted multiple other "wires" via "for" without success.
<html>
<head>
<script src="https://unpkg.com/uhtml"></script>
<head>
<body>
<script>
const html = uhtml.html,
render = uhtml.render,
items = [{text:"test item"}];
render(document.getElementById("app"), html`
<ul>
${items.map(item => html.for(item)`
<li>Keyed row with content: ${item.text}</li>
`)}
</ul>
`);
</script>
<div id="app">
</div>
</body>
</html>
min.js:1 Uncaught TypeError: Invalid value used as weak map key
at WeakMap.set ()
at Object.set (min.js:1)
at e.render (min.js:1)
at uhtml.html:10
this doesn't seem right ... I'll have a look, thanks for filing the bug 👍
So, I've tried in codepen, it works.
import {render, html} from '//unpkg.com/uhtml?module';
const items = [{text: "test item"}];
render(document.body, html`
<ul>
${items.map(item => html.for(item)`
<li>Keyed row with content: ${item.text}</li>
`)}
</ul>
`);Then I've tested your code, and noticed that you try to access the DOM before it's even created.
Move the script down the page or use DOMContentLoaded or load listeners.
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/uhtml"></script>
<head>
<body>
<script>
addEventListener('DOMContentLoaded', () => {
const html = uhtml.html,
render = uhtml.render,
items = [{text:"test item"}];
render(document.getElementById("app"), html`
<ul>
${items.map(item => html.for(item)`
<li>Keyed row with content: ${item.text}</li>
`)}
</ul>
`);
});
</script>
<div id="app">
</div>
</body>
</html>P.S. the error is that document.getElementById("app") was returning null, as you had the script evaluated before <div id="app"> ... nothing to do with this library, this is the ABC of any script ;-)
@WebReflection Wow, that was stupid of me. Hundreds of web pages developed with similar tech and I make such a naive mistake after looking at the code for hours! Sorry for wasting your time.
it happens to the best too :-) it took far too much for me to notice that too
This also happened to me today. If it's a common enough bug maybe it's worth it to have a clearer error message like "where is null".
the stack error should immediately point at the render function called with a null / undefined value ... not sure adding extra bytes to point at the very same thing makes sense ... be sure you render in nodes that exists, this library can't fix this mistake.