BokehJS and npm and embed_item()

I’m currently using BokehJS in my create-react-app by putting CDN links in my index.html. My preference is to do it via npm however when I do

import * as Bokeh from ‘bokehjs’;

``

…

Bokeh.embed.embed_item(plot_data)

``

I get a bunch of warnings from the import:

./node_modules/bokehjs/build/js/lib/models/tools/inspectors/customjs_hover.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/transforms/customjs_transform.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/transforms/customjs_transform.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/formatters/func_tick_formatter.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/filters/customjs_filter.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/callbacks/customjs.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

And this error from the embed_item() call:

spatial.js:19 Uncaught TypeError: FlatBush is not a constructor

at new SpatialIndex (spatial.js:19)

at CircleView.XYGlyphView._index_data (xy_glyph.js:38)

at CircleView.GlyphView.index_data (glyph.js:319)

at CircleView.GlyphView.set_data (glyph.js:313)

at GlyphRendererView.set_data (glyph_renderer.js:190)

at GlyphRendererView.initialize (glyph_renderer.js:94)

at GlyphRendererView.View [as constructor] (view.js:28)

at GlyphRendererView.DOMView [as constructor] (dom_view.js:19)

at GlyphRendererView.RendererView [as constructor] (renderer.js:24)

at GlyphRendererView.DataRendererView [as constructor] (data_renderer.js:19)

at new GlyphRendererView (glyph_renderer.js:54)

at Object.build_views (build_views.js:42)

at PlotView.build_renderer_views (plot_canvas.js:1063)

at PlotView.initialize (plot_canvas.js:343)

at PlotView.View [as constructor] (view.js:28)

at PlotView.DOMView [as constructor] (dom_view.js:19)

at PlotView.LayoutDOMView [as constructor] (layout_dom.js:29)

at new PlotView (plot_canvas.js:187)

at _create_view (standalone.js:17)

at render_model (standalone.js:47)

at Object.add_document_standalone (standalone.js:66)

at _embed_items (index.js:90)

at eval (index.js:56)

Is there any way to do an import from npm via create-react-app (i.e without modifying webpack which requires ejecting)?

Hi,

I'm currently using BokehJS in my create-react-app by putting CDN links in my index.html. My preference is to do it via npm however when I do

import * as Bokeh from 'bokehjs';

...

Bokeh.embed.embed_item(plot_data)

I get a bunch of warnings from the import:

./node_modules/bokehjs/build/js/lib/models/tools/inspectors/customjs_hover.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/transforms/customjs_transform.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/transforms/customjs_transform.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/formatters/func_tick_formatter.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/filters/customjs_filter.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/bokehjs/build/js/lib/models/callbacks/customjs.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

this means that you won't be able to use require/imports in CustomJS
(etc.) snippets. One can use bokehjs without those, especially that
usually you can replace such snippets with JS functions.

And this error from the embed_item() call:

spatial.js:19 Uncaught TypeError: FlatBush is not a constructor
    at new SpatialIndex (spatial.js:19)
    at CircleView.XYGlyphView._index_data (xy_glyph.js:38)
    at CircleView.GlyphView.index_data (glyph.js:319)
    at CircleView.GlyphView.set_data (glyph.js:313)
    at GlyphRendererView.set_data (glyph_renderer.js:190)
    at GlyphRendererView.initialize (glyph_renderer.js:94)
    at GlyphRendererView.View [as constructor] (view.js:28)
    at GlyphRendererView.DOMView [as constructor] (dom_view.js:19)
    at GlyphRendererView.RendererView [as constructor] (renderer.js:24)
    at GlyphRendererView.DataRendererView [as constructor] (data_renderer.js:19)
    at new GlyphRendererView (glyph_renderer.js:54)
    at Object.build_views (build_views.js:42)
    at PlotView.build_renderer_views (plot_canvas.js:1063)
    at PlotView.initialize (plot_canvas.js:343)
    at PlotView.View [as constructor] (view.js:28)
    at PlotView.DOMView [as constructor] (dom_view.js:19)
    at PlotView.LayoutDOMView [as constructor] (layout_dom.js:29)
    at new PlotView (plot_canvas.js:187)
    at _create_view (standalone.js:17)
    at render_model (standalone.js:47)
    at Object.add_document_standalone (standalone.js:66)
    at _embed_items (index.js:90)
    at eval (index.js:56)

See Investigate ESM support in bokehjs' build · Issue #8801 · bokeh/bokeh · GitHub for an explanation and
a solution.

Mateusz

Thanks.

The solution appears to involve modifying webpack config, but from my (limited) understanding of create-react-app, webpack config can’t be modified without ‘ejecting’ the project which I’d rather avoid. I suppose I’m best to stick with the CDN approach at least for now, and I’ll watch that issue and see where it goes.