Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Cannot nest custom ReactPy components (i.e. those decorated with @component) under Web Components #1323

Unanswered
shawncrawley asked this question in Problem
Discussion options

The following example yields a blank page with the subsequent error displayed in the browser console.

app.py

from reactpy import component, html, run, web
from pathlib import Path
module = web.module_from_file("bootstrap-container", Path(__file__).parent / "test.js")
Container = web.export(module, "Container")
@component
def App():
 return Container(
 html.h1("Check out my component"),
 CustomComponent(),
 )
@component
def CustomComponent():
 return html.div(
 html.h1("Custom Component"),
 )
run(App())

test.js

import React from "https://esm.sh/react@19.0"
import ReactDOM from "https://esm.sh/react-dom@19.0/client"
import {Container} from "https://esm.sh/react-bootstrap@2.10.10/?deps=react@19.0,react-dom@19.0,react-is@19.0&exports=Container";
export {Container};
export function bind(node, config) {
 const root = ReactDOM.createRoot(node);
 return {
 create: (type, props, children) => 
 React.createElement(type, props, children),
 render: (element) => root.render(element, node),
 unmount: () => root.unmount()
 };
}

Error:
image

You must be logged in to vote

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /