Trying to compile bokeh custom extension - getting NPM error

Community Support
1

According to Extending Bokeh — Bokeh 2.4.2 Documentation I should be able to setup a bokeh build environment for my custom ts extensions. I have tried running bokeh init inside my directory called bokehbuild which generates a set of files - and when i then run bokeh build to build the generated index.ts file (which i have filled with code from A new custom tool — Bokeh 2.4.2 Documentation)

I just get the following error:

Running npm install.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for bokehjs@^2.3.2.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'bokehbuild'
npm ERR! notarget

What am i doing wrong here?

2

cc @mateusz

3

aha by searching the npm i found out that package.json should be updated to have @bokeh/bokehjs as dependency and not bokehjs (i guess the bokeh init script has not been updated properly yet)

However, now I am getting a set of compile errors:

Compiling TypeScript (1 files)
index.ts:1:44 - error TS2307: Cannot find module 'models/tools/gestures/gesture_tool' or its corresponding type declarations.

1 import {GestureTool, GestureToolView} from "models/tools/gestures/gesture_tool"
                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
index.ts:2:32 - error TS2307: Cannot find module 'models/sources/column_data_source' or its corresponding type declarations.

2 import {ColumnDataSource} from "models/sources/column_data_source"
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
index.ts:3:24 - error TS2307: Cannot find module 'core/ui_events' or its corresponding type declarations.

3 import {PanEvent} from "core/ui_events"
                         ~~~~~~~~~~~~~~~~
index.ts:4:20 - error TS2307: Cannot find module 'core/properties' or its corresponding type declarations.

4 import * as p from "core/properties"
                     ~~~~~~~~~~~~~~~~~
index.ts:11:16 - error TS2339: Property 'source' does not exist on type 'DrawTool'.

11     this.model.source.data = {x: [], y: []}
                  ~~~~~~
index.ts:16:26 - error TS2339: Property 'plot_view' does not exist on type 'DrawToolView'.

16     const {frame} = this.plot_view
                            ~~~~~~~~~
index.ts:25:12 - error TS2339: Property 'source' does not exist on type 'DrawTool'.

25     const {source} = this.model
              ~~~~~~
index.ts:59:20 - error TS2339: Property 'default_view' does not exist on type 'DrawTool'.

59     this.prototype.default_view = DrawToolView
                      ~~~~~~~~~~~~
index.ts:61:10 - error TS2339: Property 'define' does not exist on type 'typeof DrawTool'.

61     this.define<DrawTool.Props>(({Ref}) => ({
            ~~~~~~
index.ts:61:35 - error TS7031: Binding element 'Ref' implicitly has an 'any' type.

61     this.define<DrawTool.Props>(({Ref}) => ({
                                     ~~~

Linking modules
BuildError: can't resolve 'models/tools/gestures/gesture_tool' from '/Users/foobar/bokehbuild/dist/lib/index.js'
    at Linker.resolve_absolute (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167360:20)
    at Linker.resolve_file (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167366:29)
    at Linker.new_module (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167483:43)
    at Linker.resolve (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167528:37)
    at Linker.link (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167113:36)
    at Object.build (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:165789:50)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async main (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:203:32) {
  component: 'linker'
}
BuildError: can't resolve 'models/sources/column_data_source' from '/Users/foobar/bokehbuild/dist/lib/index.js'
    at Linker.resolve_absolute (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167360:20)
    at Linker.resolve_file (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167366:29)
    at Linker.new_module (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167483:43)
    at Linker.resolve (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167528:37)
    at Linker.link (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:167113:36)
    at Object.build (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:165789:50)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async main (/Users/foobar/projects/bokeh/bokeh/server/static/js/compiler.js:203:32) {
  component: 'linker'
}

I am even using the bokeh anaconda env. which i made according to the bokeh developer guidelines… Shouldn’t those imports, like

import {GestureTool, GestureToolView} from "models/tools/gestures/gesture_tool"
import {ColumnDataSource} from "models/sources/column_data_source"
import {PanEvent} from "core/ui_events"
import * as p from "core/properties"

be available in the @bokeh/bokehjs dependency?

4

Hey @bokehcoder, not sure if you’ve still got this problem, but I was able to fix these compilation errors by prefixing @bokehjs/ to the import locations, e.g. import * as p from "@bokehjs/core/properties". That made bokeh build work (at the expense of no longer being able to run the custom extension with run-time compiling, FWIW).

Take a look at this documentation, it was pretty helpful to me (although it is set up to compile the extensions as a node package and read them from npm, which may not be the outcome you want — it wasn’t mine :man_shrugging:)