React component nesting hydration errors

[jlarmstrongiv]

What version of HonoX are you using?

0.1.26

What steps can reproduce the bug?

Nest an island within an island or nest an island within a non-island

What is the expected behavior?

No console warnings

What do you see instead?

c.render(
  <div>
      <p>NonIslandCounter within Counter</p>
        <Counter>
        <NonIslandCounter />
      </Counter>

      <p>Counter within Counter</p>
      <Counter key="my-parent-counter">
        <Counter key="my-counter" />
      </Counter>
  </div>
)

Generate warnings:

counter.tsx:21 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `WrappedCounter`. See https://reactjs.org/link/warning-keys for more information.
    at WrappedCounter
    at WrappedCounter
printWarning @ react_jsx-dev-runtime.js?v=03002a98:64
error @ react_jsx-dev-runtime.js?v=03002a98:48
validateExplicitKey @ react_jsx-dev-runtime.js?v=03002a98:724
validateChildKeys @ react_jsx-dev-runtime.js?v=03002a98:737
jsxWithValidation @ react_jsx-dev-runtime.js?v=03002a98:855
WrappedCounter @ counter.tsx:21
renderWithHooks @ react-dom_client.js?v=03002a98:11548
mountIndeterminateComponent @ react-dom_client.js?v=03002a98:14926
beginWork @ react-dom_client.js?v=03002a98:15914
beginWork$1 @ react-dom_client.js?v=03002a98:19753
performUnitOfWork @ react-dom_client.js?v=03002a98:19201
workLoopSync @ react-dom_client.js?v=03002a98:19137
renderRootSync @ react-dom_client.js?v=03002a98:19116
performConcurrentWorkOnRoot @ react-dom_client.js?v=03002a98:18678
workLoop @ react-dom_client.js?v=03002a98:197
flushWork @ react-dom_client.js?v=03002a98:176
performWorkUntilDeadline @ react-dom_client.js?v=03002a98:384Understand this errorAI
react-dom_client.js?v=03002a98:521 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at DIV
    at div
    at div
    at CounterOriginal (http://localhost:8787/app/islands/counter.tsx?t=1729400345383&v=03002a98:5:3)
    at WrappedCounter
printWarning @ react-dom_client.js?v=03002a98:521
error @ react-dom_client.js?v=03002a98:505
warnForMissingKey @ react-dom_client.js?v=03002a98:9864
warnOnInvalidKey @ react-dom_client.js?v=03002a98:10205
reconcileChildrenArray @ react-dom_client.js?v=03002a98:10235
reconcileChildFibers2 @ react-dom_client.js?v=03002a98:10559
reconcileChildren @ react-dom_client.js?v=03002a98:14290
updateHostComponent @ react-dom_client.js?v=03002a98:14807
beginWork @ react-dom_client.js?v=03002a98:15935
beginWork$1 @ react-dom_client.js?v=03002a98:19753
performUnitOfWork @ react-dom_client.js?v=03002a98:19201
workLoopSync @ react-dom_client.js?v=03002a98:19137
renderRootSync @ react-dom_client.js?v=03002a98:19116
performConcurrentWorkOnRoot @ react-dom_client.js?v=03002a98:18678
workLoop @ react-dom_client.js?v=03002a98:197
flushWork @ react-dom_client.js?v=03002a98:176
performWorkUntilDeadline @ react-dom_client.js?v=03002a98:384Understand this errorAI
react-dom_client.js?v=03002a98:521 Warning: Invalid DOM property `class`. Did you mean `className`?
    at BUTTON
    at DIV
    at div
    at div
    at CounterOriginal (http://localhost:8787/app/islands/counter.tsx?t=1729400345383&v=03002a98:5:3)
    at WrappedCounter

Additional information

#150
#155

[yusukebe]

Hi @jlarmstrongiv

It should display more friendly errors, but this is more of a usage issue than a bug.

Each child in a list should have a unique "key" prop.

Try setting a unique value for key, not my-parent-counter.

[jlarmstrongiv]

Hi @yusukebe

According to the react docs:

A key is a string or a number that uniquely identifies it among other items in that array

If a key can be any unique string, with my-parent-counter and my-counter being unique keys not used anywhere else in the application, I think this would be a bug.

If I remember right, the warnings are coming from a component that HonoX wraps around counter (e.g. WrappedCounter), which I cannot pass a unique key to because I don’t have access to it.

[yusukebe]

@jlarmstrongiv

Thank you for the explanation! Indeed it's a bug! I'll investigate it.

[yusukebe]

Hi @usualoma

This is a bug that occurs with React. The reason seems that the key property is not set at the following line:

honox/src/vite/components/honox-island.tsx

Line 60 in 034cd20

<template {...{ [DATA_HONO_TEMPLATE]: key }}>

It will be solved by setting the key property. Can you take a look at this?

[usualoma]

I'll check it, so just wait a moment.

[yusukebe]

@usualoma Thank you!

[usualoma]

Sorry for the delay in replying. I've identified where the changes need to be made. Three commits are required.
I'm preparing them now, so please wait a little longer.

[usualoma]

It could have been fixed with two instead of three.