Problem importing @bokeh/bokehjs module in javascript app

Hi,

I have been trying to import @bokeh/bokehjs in a javascript app with very little success.
I install the module with npm but when I include the following line:
import * as Bokeh from ‘@bokeh/bokehjs’;
I get the following error:
ReferenceError: Cannot access ‘ColumnarDataSource’ before initialization

The application was created with Create-React-App and so it uses webpack and babel. I had other errors prior to this one that were solved by configuring options in babel and updating all components and modules but I am stumped on this one.

If I try and import just the core module, ie
import * as Bokeh from ‘@bokeh/bokehjs/build/js/bokeh.esm.min.js’;
then I get this error
Attempted import error: ‘ColumnDataSource’ is not exported from ‘@bokeh/bokehjs/build/js/bokeh.esm.min.js’

Is there something else I need to do? This is just importing the module and not using it yet.

Thanks.

cc @mateusz

Any thoughts on this? I still cannot get bokehjs to work.

I have tracked down the problem to be a circular dependency, but I don’t yet know how to fix that.

Circular dependency detected:
node_modules\@bokeh\bokehjs\build\js\lib\core\selection_manager.js ->
node_modules\@bokeh\bokehjs\build\js\lib\models\renderers\glyph_renderer.js ->
node_modules\@bokeh\bokehjs\build\js\lib\models\sources\columnar_data_source.js ->
node_modules\@bokeh\bokehjs\build\js\lib\core\selection_manager.js

Looks like there are a lot of circular dependencies.
Is there any way around this?

Circular dependency detected:
node_modules@bokeh\bokehjs\build\js\lib\core\util\ndarray.js → node_modules@bokeh\bokehjs\build\js\lib\core\util\serialization.js → node_modules@bokeh\bokehjs\build\js\lib\core\util\ndarray.js

Circular dependency detected:
node_modules@bokeh\bokehjs\build\js\lib\core\util\serialization.js → node_modules@bokeh\bokehjs\build\js\lib\core\util\ndarray.js → node_modules@bokeh\bokehjs\build\js\lib\core\util\serialization.js

Circular dependency detected:
node_modules@bokeh\bokehjs\build\js\lib\models\glyphs\circle.js → node_modules@bokeh\bokehjs\build\js\lib\models\glyphs\webgl\markers.js → node_modules@bokeh\bokehjs\build\js\lib\models\glyphs\circle.js

Circular dependency detected:
node_modules@bokeh\bokehjs\build\js\lib\models\glyphs\webgl\markers.js → node_modules@bokeh\bokehjs\build\js\lib\models\glyphs\circle.js → node_modules@bokeh\bokehjs\build\js\lib\models\glyphs\webgl\markers.js

Circular dependency detected:
node_modules@bokeh\bokehjs\build\js\lib\models\renderers\glyph_renderer.js → node_modules@bokeh\bokehjs\build\js\lib\models\sources\columnar_data_source.js → node_modules@bokeh\bokehjs\build\js\lib\core\selection_manager.js → node_modules@bokeh\bokehjs\build\js\lib\models\renderers\glyph_renderer.js

Circular dependency detected:
node_modules@bokeh\bokehjs\build\js\lib\models\renderers\graph_renderer.js → node_modules@bokeh\bokehjs\build\js\lib\models\renderers\glyph_renderer.js → node_modules@bokeh\bokehjs\build\js\lib\models\sources\columnar_data_source.js → node_modules@bokeh\bokehjs\build\js\lib\core\selection_manager.js → node_modules@bokeh\bokehjs\build\js\lib\models\renderers\graph_renderer.js

Circular dependency detected:
node_modules@bokeh\bokehjs\build\js\lib\models\sources\cds_view.js → node_modules@bokeh\bokehjs\build\js\lib\models\sources\columnar_data_source.js → node_modules@bokeh\bokehjs\build\js\lib\core\selection_manager.js → node_modules@bokeh\bokehjs\build\js\lib\models\renderers\glyph_renderer.js → node_modules@bokeh\bokehjs\build\js\lib\models\sources\cds_view.js

Circular dependency detected:
node_modules@bokeh\bokehjs\build\js\lib\models\sources\columnar_data_source.js → node_modules@bokeh\bokehjs\build\js\lib\core\selection_manager.js → node_modules@bokeh\bokehjs\build\js\lib\models\renderers\glyph_renderer.js → node_modules@bokeh\bokehjs\build\js\lib\models\sources\columnar_data_source.js

@MarkM

Is this issue related to your problem? What version of bokeh are you using?

That does certainly seem to be a similar, if not the same, issue.
I am using version 2.3.0
I also tried 2.3.1-dev.1 but the results were the same.
I installed via npm install @bokeh/bokehjs

@MarkM

I see. I personally do not use bokeh in that way so cannot offer personal experience on how to resolve.

That said, I was led to that GitHub issue from the following post on bokeh discourse. The author indicates that manifestation of the issue is strongly dependent on the order of imports, and they were successfully unblocked by some one-line change.

Not certain if that was tailoring the import order or something else; given the recentness of the post perhaps you might have luck getting them to elaborate on that fix.

This is still a complete blocker and I have made zero progeess and consumed many hours.
Based on the ideas in the thread that @_jm posted (originally by @zsolt) I have tried different import orders but still get the “ReferenceError: Cannot access ‘ColumnarDataSource’ before initialization” error.

Can anyone offer any ideas on potential workarounds or should I just dump the idea of using bokeh? It has already consumed many hours to even get a simple import working and I am a little frustrated.

There appear to be many circular dependency problems in bokehjs, is there any way to resolve these?

Thanks.

Based on a clue in the post from @zsolt I have backed the bokehjs version back to 2.0.2 and it now loads and does not get the reference error so at least I can progress…somewhat cautiously.

It seems that the problems were introduced somewhere between 2.0.2 and 2.3.0

@MarkM

Agree with your assumption that the problem appears to have been introduced between bokeh 2.0.2 and 2.3.0 based on the information in the related bokeh discourse topics.

Your best bet to have the problem properly addressed - so you can leverage future features and enhancements in bokeh - is to submit a GitHub issue that can be addressed by the developers.

FYI