Use of ipywidgets_bokeh ia panel.react template

Panel
,
1

Hi,

I am trying to embed a map in a panel application, for the purpose I was looking into ipyleaflet wrapped into a ‘ipywidgets_bokeh’

import panel as pn
from ipyleaflet import Map
from ipywidgets_bokeh import IPyWidget

pn.extension(comms='ipywidgets')

# react = pn.template.ReactTemplate(title='React Template')

pn.config.sizing_mode = 'stretch_both'

center = (52.204793, 360.121558)
m = Map(center=center, zoom=15)
map_wrap = IPyWidget(widget=m, width_policy='fit', height=40)

# react.main[:, :] = pn.Card(map_wrap, title='Sine')
# react.servable();

pn.Row(map_wrap).servable()

The code above works if use a base panel app, but fails if attempting to embed it into a react template.
While running the react-based app, nothing is rendered (just the template), and no logs from the std-out shell. While the JS console shows 2 main errors, one very verbose about require.js:

require.min.js:1 Uncaught Error: Mismatched anonymous define() module: function (exports) { 'use strict';

  var ReactVersion = '16.14.0';
...
...
  exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
  exports.createPortal = createPortal$1;
  exports.findDOMNode = findDOMNode;
  exports.flushSync = flushSync;
  exports.hydrate = hydrate;
  exports.render = render;
  exports.unmountComponentAtNode = unmountComponentAtNode;
  exports.unstable_batchedUpdates = batchedUpdates$1;
  exports.unstable_createPortal = unstable_createPortal;
  exports.unstable_renderSubtreeIntoContainer = renderSubtreeIntoContainer;
  exports.version = ReactVersion;

}
http://requirejs.org/docs/errors.html#mismatch
    at makeError (require.min.js:1)
    at v (require.min.js:1)
    at require.min.js:1

and then the fail in loading the bokeh js:

bokeh.min.js?v=34492a651483e52ab93f122d922484233256bf44948e2fc265422ab409533866f6f8fe46c6e6e120eb72100deac48f64ad53bececef3b710aaa2347400aa35a8:583 Uncaught (in promise) Error: Error rendering Bokeh model: could not find #e00d2c47-a787-4518-b022-6d83f84982d0 HTML tag
    at u (bokeh.min.js?v=34492a651483e52ab93f122d922484233256bf44948e2fc265422ab409533866f6f8fe46c6e6e120eb72100deac48f64ad53bececef3b710aaa2347400aa35a8:583)
    at Object.n._resolve_root_elements (bokeh.min.js?v=34492a651483e52ab93f122d922484233256bf44948e2fc265422ab409533866f6f8fe46c6e6e120eb72100deac48f64ad53bececef3b710aaa2347400aa35a8:583)
    at w (bokeh.min.js?v=34492a651483e52ab93f122d922484233256bf44948e2fc265422ab409533866f6f8fe46c6e6e120eb72100deac48f64ad53bececef3b710aaa2347400aa35a8:163)
    at Object.t.embed_items (bokeh.min.js?v=34492a651483e52ab93f122d922484233256bf44948e2fc265422ab409533866f6f8fe46c6e6e120eb72100deac48f64ad53bececef3b710aaa2347400aa35a8:163)

Do you know if possible to iuse react withpywidgets_bokeh?

2

Hi @epifanio

Could you try Panel way of using ipywidgets?

See Ipywidget — Panel 0.11.3 documentation (holoviz.org)

3

Hi @Marc , thanks for your reply.
I tried the example notebook IPyWidget.ipynb and it works as expected in a standard jupyter notebook, while returns ‘no-output/empty-output cells’ in a jupyterlab environment (same kernel).
I tried to run a ‘pip install -U’ for panel, and ipywidgets to make sure the libraries are up-to-date, but got the same results.

My aim is to serve an application using bokeh/panel serve, in such case I also got no-output and no error logs.

Using ipywidgets_bokeh.IPyWidget i can re-use ipywidgets in bokeh and/or panel environment, but not when attempting to use the react. template.