How to add a new custom lib file to create-react-app - create-react-app

Question

I have started a new create-react-app that uses bokeh to render some plots. Since i have complex plots i need to be able to import/include a custom library that pull some modules from bokehjs.
How I do it: in my index.js file i include the lib like this
require('./_beadselection.ts')
my beadselection.ts file looks like this:
import {Span, SpanView} from "#bokeh/bokehjs"
import {Plot} from "#bokeh/bokehjs"
import {FactorRange} from "#bokeh/bokehjs"
import {Mapping} from "#bokeh/bokehjs"
import {BoxedFactor} from "#bokeh/bokehjs"
import * as p from "core/properties"
export class CpxSpanView extends SpanView {
model: CpxSpan
connect_signals(): void {
super.connect_signals()
this.connect(this.model.properties.selected.change, () => { this.on_selected() })
}
on_selected(): void {
let val = NaN
const rng = this.model.range.factors
const width = Math.round(Math.max(
3, this.model.plot.inner_width / (.5+this.model.range.synthetic(rng[rng.length-1])) * .5
))
if(this.model.selected >= 0 && this.model.selected < rng.length)
val = this.model.range.synthetic(rng[this.model.selected])
this.model.setv({line_width: width, location: isNaN(val) ? -1. : val});
}
}
export namespace CpxSpan {
export type Attrs = p.AttrsOf<Props>
export type Props = Span.Props & {
plot: p.Property<Plot>
range: p.Property<FactorRange>
selected: p.Property<number>
}
}
The errors that come up are these:
Compiled with problems:
ERROR in ./src/_beadselection.ts 4:0-37
Module not found: Error: Can't resolve 'core/properties' in '/home/ubuntu/reactAPP/react-flask-app/src'
ERROR in ./src/_beadselection.ts 5:33-41
export 'SpanView' (imported as 'SpanView') was not found in '#bokeh/bokehjs' (possible exports: ActionTool, AdaptiveTicker, AjaxDataSource, AllLabels, Annotation, AnnularWedge, Annulus, Arc, Arrow, ArrowHead, Ascii, Axis, BBoxTileSource, Band, BasicTickFormatter, BasicTicker, Bezier, BinnedTicker, BooleanFilter, Box, BoxAnnotation, BoxEditTool, BoxSelectTool, BoxZoomTool, ButtonTool, CDSView, Canvas, CanvasTexture, CartesianFrame, CategoricalAxis, CategoricalColorMapper, CategoricalMarkerMapper, CategoricalPatternMapper, CategoricalScale, CategoricalTickFormatter, CategoricalTicker, Charts, Circle, ColorBar, ColorMapper, Column, ColumnDataSource, ColumnarDataSource, CompositeTicker, ContinuousAxis, ContinuousColorMapper, ContinuousScale, ContinuousTicker, CoordinateMapping, CrosshairTool, CumSum, CustomAction, CustomJS, CustomJSExpr, CustomJSFilter, CustomJSHover, CustomJSTransform, CustomLabelingPolicy, DataRange, DataRange1d, DataSource, DatetimeAxis, DatetimeTickFormatter, DatetimeTicker, DaysTicker, Document, Dodge, EdgeCoordinates, EdgesAndLinkedNodes, EdgesOnly, EditTool, Ellipse, EllipseOval, EqHistColorMapper, Expression, FactorRange, Filter, FixedTicker, FreehandDrawTool, FuncTickFormatter, GMapOptions, GMapPlot, GeoJSONDataSource, GestureTool, Glyph, GlyphRenderer, GraphCoordinates, GraphHitTestPolicy, GraphRenderer, Grid, GridBox, GroupFilter, GuideRenderer, HArea, HBar, HTMLBox, HelpTool, HexTile, HoverTool, Image, ImageRGBA, ImageURL, ImageURLTexture, IndexFilter, InspectTool, Interpolator, IntersectRenderers, Jitter, Label, LabelSet, LabelingPolicy, LassoSelectTool, LayoutDOM, LayoutProvider, Legend, LegendItem, LinAlg, Line, LineEditTool, LinearAxis, LinearColorMapper, LinearInterpolationScale, LinearInterpolator, LinearScale, LogAxis, LogColorMapper, LogScale, LogTickFormatter, LogTicker, MapOptions, MathML, MathText, Maximum, MercatorAxis, MercatorTickFormatter, MercatorTicker, MercatorTileSource, Minimum, Models, MonthsTicker, MultiLine, MultiPolygons, NoOverlap, NodeCoordinates, NodesAndLinkedEdges, NodesOnly, NormalHead, NumeralTickFormatter, OpenHead, OpenURL, Oval, Palettes, PanTool, Panel, Patch, Patches, PlainText, Plot, Plotting, PointDrawTool, PolarTransform, PolyAnnotation, PolyDrawTool, PolyEditTool, PolySelectTool, PolyTool, PrintfTickFormatter, ProxyToolbar, QUADKEYTileSource, Quad, Quadratic, Range, Range1d, RangeTool, Ray, Rect, RedoTool, Renderer, RendererGroup, ResetTool, Row, SaveTool, ScalarExpression, Scale, ScanningColorMapper, Scatter, Segment, SelectTool, Selection, SelectionPolicy, ServerSentDataSource, SingleIntervalTicker, Slope, Spacer, Span, Spline, Stack, StaticLayoutProvider, Step, StepInterpolator, TMSTileSource, Tables, Tabs, TapTool, TeX, TeeHead, Text, TextAnnotation, Texture, TickFormatter, Ticker, TileRenderer, TileSource, Title, Tool, ToolProxy, Toolbar, ToolbarBase, ToolbarBox, ToolbarPanel, Tooltip, Transform, UndoTool, UnionRenderers, VArea, VBar, VeeHead, WMTSTileSource, WebDataSource, Wedge, WheelPanTool, WheelZoomTool, Whisker, WidgetBox, Widgets, XComponent, YComponent, YearsTicker, ZoomInTool, ZoomOutTool, _testing, documents, embed, index, logger, protocol, safely, set_log_level, settings, sprintf, version)
I guess I am not connecting them properly, I even added the full path to the library file from where SpanView should be pulled and it still does not like it.
import {Span, SpanView} from "../node_modules/#bokeh/bokehjs/build/js/lib/models/annotations"