Bokehjs property not declared issue with reactjs

Hi team,

I’m using reactjs with webpack and installed bokehjs via yarn/npm,

When trying to embed the json received from django, in browser no graph could be rendered, having multiple issues like:

has_props.js:256 Uncaught (in promise) Error: property ColumnDataSource.selectionPolicy wasn't declared

from the look of the issue it seems to be similar like

but in the django/react the version matches:

Screenshot at Aug 12 15-18-392090×1308 771 KB

with bokehjs loading we followed other thread’s solution to include @babel/plugin-proposal-export-namespace-from plugin in webpack config, that allow us to pass the build process but not necessarily working in the browser

on django side we are installing with pipenv install and version is ==2.1.1
on react side we are installing with yarn and version is "@bokeh/bokehjs": 2.1.1
and we have to do

"resolutions": {
  "@bokeh/slickgrid": "2.3.23"
},

to resolve the bug in 2.4.27(we could not use 2.4.27-1 since the build warns about the version is not compatible with bokehjs 2.1.1)

it was working approximately 4 weeks ago, there were some updates on our code base too but with my limited knowledge with react/webpack I haven’t figured out what is causing it yet

I’ve also tried to downgrade both django and react bokeh to 1.4.0, and the issue persists(property was not declared)

Any help would be appreciated

Error: property ColumnDataSource.selectionPolicy wasn't declared

It should be selection_policy. If this is not a simple typo on your side, you’ll have to give us a bit more context than just the error message.

No this is not a typo.

Thanks for the reply! This actually provides crucial information for our end, there are some property casing manipulation happening on our end so this should be the root cause, we’ll look into this route.

By the way our current solution is to use the html embed route and putting the raw html into an iframe component, so that the js is isolated.
(We tried to directly load through CDN and getting the same issue property {…} wasn’t declared)

Just for more context: Bokeh is a cross-runtime tool (Python and JS) and we have chosen to stick with a single naming conventions (Python) everywhere for shared properties, for simplicity and consistency. That is why there is no camelCase naming in BokehJS.