Bokeh Discourse

BokehJS and npm and embed_item()

Community Support

Dave_Grant May 1, 2019, 3:07pm 1

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)?

Node12 import error bokeh 2.0

Mateusz_Paprocki1 May 1, 2019, 8:33pm 2

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

···

On Wed, May 1, 2019 at 5:07 PM Dave Grant <[email protected]> wrote:

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

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/5f6e1eba-c856-4c1b-8e10-7b9ee34da89e%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Dave_Grant May 1, 2019, 8:43pm 3

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.

···

On Wednesday, May 1, 2019 at 4:34:48 PM UTC-4, Mateusz Paprocki wrote:

Hi,

On Wed, May 1, 2019 at 5:07 PM Dave Grant [email protected] wrote:

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 https://github.com/bokeh/bokeh/issues/8801 for an explanation and

a solution.

Mateusz

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

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/5f6e1eba-c856-4c1b-8e10-7b9ee34da89e%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.