Javascript Error while Rendering

[arnavdas88]

I am trying to build a component library on top of reactpy for Nivo Charts.

After following the documentation, I have imported the library nivo charts into python and imported a chart like this:

from reactpy import component, run, web

nivo_module = web.module_from_template(
    "react",
    "@nivo/core",
    fallback="⌛",
)
nivo_bar_module = web.module_from_template(
    "react",
    "@nivo/bar",
    fallback="⌛",
)

ResponsiveBar = web.export(nivo_bar_module, "ResponsiveBar")

Once imported, I am using the exported object ResponsiveBar as below:

@component
def HelloWorld():
    return html.section(
        ResponsiveBar({"data":data, "keys": [ 'hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut'], "indexBy": "country", "role": "application"})
    )


app = FastAPI()
configure(app, HelloWorld)

I am trying to replicate the example showcased in Nivo Playground

When running the uvicorn server, while rendering, I am getting a javascript error Uncaught (in promise) SyntaxError: ambiguous indirect export: isString

Q.) Is this a problem from the Nivo charts?
Q.) Is it because of some conversion in module_from_template?
Q.) Is there something that I am doing wrong?
Q.) Or, Is this normal?

[Archmonger]

module_from_template is deprecated due to instability and will be removed in the next major release.
For now, we suggest using the custom components API instead.

[arnavdas88]

After using the Custom Components API, the code works properly, without errors, but every time I am using the exported component,

ResponsiveBar({"data":data, "keys": [ 'hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut'], "indexBy": "country", "role": "application"})

It renders inside a <div></div>. Containing the component inside an html.div just add another div.

# My Code
@component
def HelloWorld():
    return html.div(
        {"style": "height:500px;"},
        ResponsiveBar({"data":data, "keys": [ 'hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut'], "indexBy": "country", "role": "application"})
    )

app = FastAPI()
configure(app, HelloWorld)

<!-- Rendered HTML -->
<div style="height: 500px;">
    <div>
        <div style="width: 100%; height: 100%;"></div>
    </div>
</div>

I am unable to control anything regarding the middle <div>. Although, it can be controlled, if i set style for all div globally, but is there any other way to control it? like using some parameters/arguments? Does all custom components get wrapped by div?

[Archmonger]

@rmorshea Can you chime in?