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?