BokehJS import not working properly in React app

I 'm trying to use the plotting library BokehJS with a React app that was set up using

create-react-app myapp

The library was installed using

npm install bokehjs

Inside the myapp/public/index.html file, the following lines were added (as explained in the user guide’s installation section):

<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-1.4.0.min.js"></script>
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-api-1.4.0.min.js"></script>

I now would like to recreate some of the examples in the BokehJS user guide. Importing the module in myapp/App.js with

import Bokeh from 'bokehjs'

and trying to access some of the module’s functions/objects like

Bokeh.LinAlg

leads to the following error being displayed in the browser after compilation:

TypeError: undefined is not an object (evaluating 'bokehjs__WEBPACK_IMPORTED_MODULE_3___default.a.LinAlg')

In the browser developer tools’ console, the following error is displayed:

Failed to load resource: the server responded with a status of 403 ()

Any help with fixing this would be greatly appreciated.

Hi,

you cannot directly import the Bokeh object when adding the BokehJS via the CDN using the script tags. I figured myself that using the script tags is the only option to get BokehJS working, however you need to access Bokeh then via window.Bokeh.

So instead of import Bokeh from 'bokehjs' you would write:

const Bokeh = window.Bokeh;