Local JSX files in ReactComponent

Panel
1

Is it possible to reference local jsx files, inside my main jsx?

So lets say I have a react component such as react.py:

from panel.custom import ReactComponent

class TestComponent(ReactComponent):

_esm = "./test.jsx"

and in test.jsx

I have

import { OtherReactComponent } from './react/components/OtherReactComponent.jsx';
...

I keep getting browser errors of referencing this other file. So my main file, in the _esm is recognized but the import into the jsx referenced is not. How do you properly do this in Panel?

The alternative is to have one huge jsx file, which works but is really poor practice in my opinon.

Feel like I have tried everything and am looking for some guidance. Thanks!

2

The error it produces is something like

 Error rendering Bokeh items: TypeError: Failed to resolve module specifier "./react/components/OtherReactComponent.jsx". Invalid relative url or base scheme isn't hierarchical.
3

Something is possible because its done in panel-material-ui:

image

Whether it works because a build process is configured I don’t know.

See panel-material-ui/src/panel_material_ui/chat/ChatArea.jsx at main · panel-extensions/panel-material-ui

4

Yeah thanks for the share, I do see that now. It looks like there could be a couple things at play here… I will hope that someone provides some feedback on how to do this, in the mean time I will experiment and share if I figure anything. Thanks!

5

@Marc do you know anybody with expertise here that could share an example or assist? I have tried every permutation I have found reference to inside panel and cannot figure this out. I figure this is a common thing that people would want to do - Thanks.