This very simple example results in an error. I am probably doing something very simpl

So, I've <a href="https://codepen.io/WebReflection/pen/MWKjOxP?editors=0010" rel="nofo

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Invalid value used as weak map key about uhtml HOT 8 CLOSED

webreflection commented on September 25, 2024

Invalid value used as weak map key

from uhtml.

Comments (8)

WebReflection commented on September 25, 2024

this doesn't seem right ... I'll have a look, thanks for filing the bug 👍

from uhtml.

anywhichway commented on September 25, 2024

Slightly more helpful error message from Firefox: TypeError: WeakMap key must be an object, got null

…

On Mon, Jun 15, 2020 at 1:12 PM Andrea Giammarchi ***@***.***> wrote: this doesn't seem right ... I'll have a look, thanks for filing the bug 👍 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABF2USYWPKL7W2MNNWJNPBDRWZ6ENANCNFSM4N6PY4YA> .

from uhtml.

WebReflection commented on September 25, 2024

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>

from uhtml.

WebReflection commented on September 25, 2024

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 ;-)

from uhtml.

anywhichway commented on September 25, 2024

@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.

from uhtml.

WebReflection commented on September 25, 2024

it happens to the best too :-) it took far too much for me to notice that too

from uhtml.

akvadrako commented on September 25, 2024

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".

from uhtml.

WebReflection commented on September 25, 2024

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.

from uhtml.

Invalid value used as weak map key about uhtml HOT 8 CLOSED

Comments (8)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent