Skip to content

router: RouterContext.Provider with multiple JSX children throws generic appendChild error #2821

@matheuspoleza

Description

@matheuspoleza

RouterContext.Provider appears to accept only a single child. Passing multiple sibling elements crashes at mount with a generic DOM error.

Repro

import { RouterContext, createRouter, defineRoutes, RouterView } from 'vertz/ui';

const router = createRouter(defineRoutes({ '/': { component: () => <div>Hello</div> } }));

export function App() {
  return (
    <RouterContext.Provider value={router}>
      <aside>sidebar</aside>
      <main>
        <RouterView router={router} fallback={() => <div>404</div>} />
      </main>
    </RouterContext.Provider>
  );
}

Actual

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at __append (chunk-USZDQT4D.js:288:10)
    at App (src/app.tsx:...)

Expected

A clear, actionable error at mount or at compile time:

RouterContext.Provider expects a single child. Wrap siblings in a fragment or a parent element.

Workaround

Wrap siblings in a single parent:

<RouterContext.Provider value={router}>
  <div style={{ display: 'flex' }}>
    <aside>sidebar</aside>
    <main>...</main>
  </div>
</RouterContext.Provider>

Environment

  • Vertz 0.2.64 (dev server)
  • macOS arm64, Node v22

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions