Including a React component defined in a npm package

Panel
1

Hello,
I am trying to use a React component defined in a npm package as a ReactComponent.
Is it possible and, in that case, could you provide any input about how to install the npm package and the necessary dependencies in the project?
Any hint would be appreciates, thanks!

2

Perhaps
conda install -c conda-forge nodejs
npm install ...

1 Like
3

Thanks @ahuang11!
I managed to install the package in a subfolder of my project (‘./H5Wasm/node_modules’) but the import is still failing.

In the main .py file I defined the ReactComponent:

class HDF5Component(ReactComponent):
    _esm = Path('H5Wasm/H5WasmApp.jsx')

and the ‘H5WasmApp.jsx’ file contains:

import {App} from 'node_modules/@h5web/app';

export function render({model}) {
  return App();
};

When I run the app I get the following error in the console of the browser:

Error rendering Bokeh items: Error: Unable to resolve specifier ‘node_modules/@h5web/app’ imported from blob

Am I incorrectly specifying the path or is the whole approach wrong (e.g. I need to bundle the package before importing it)?

4

Unfortunately I don’t realy know much about js :cry:

I recommend asking one of the LLMs like ChatGPT and seeing if it can help guide you.

Alternatively, I think perhaps How to use JSComponent with FullCalendar - #4 by philippjfr could be helpful. Seems like you might need importmap?

5

The example in the link you shared works for me and I could get the import working for my case with the same approach but I am getting a different error on the rendering… I guess I need to read more into React components and understand how they work. Thanks for your help!