I created a react app with create-react-app. In this app, I use Openseadragon to display images. Furthermore, I use the Annotorious plugin to annotate the image. My code runs without any errors. Since Annotorious has no type definitions, I imported it like this:
import OpenSeadragon from "openseadragon";
//@ts-ignore
import * as Annotorious from "@recogito/annotorious-openseadragon";
import "@recogito/annotorious-openseadragon/dist/annotorious.min.css";
Now I wanted to package the app in electron forge. To save me some config work, I just used the electron forge template for typescript-webpack, did all react steps, and then copied the cra code over to the forge project.
However, now this exact code does not work. As soon as I call the Annotorius code, I get this error:
Annotorious is not a function TypeError: Annotorious is not a function
at Object.eval [as handler] (webpack-internal:///./src/frontend/elements/openSeaDragon/OpenSeaDragonViewer.tsx:75:32)
at eval (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:3225:33)
at $.Viewer.raiseEvent (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:3247:13)
at checkCompletion (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:8239:27)
at options.success (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:8291:17)
at processReadyItems (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:9195:39)
at eval (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:9207:13)
at $.TileSource.success (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:10102:21)
at Object.eval [as handler] (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:12640:19)
at eval (webpack-internal:///./node_modules/openseadragon/build/openseadragon/openseadragon.js:3225:33)
OpenSeadragon throws the error because I attach Annotorious in the "open" event of OpenSeadragon.
I found this question about Annotorious in combination with next.js, but I could use the answer.
If this error is caused by the way I import the app (maybe Annotorious is not present for Openseadragon), then here is my code how I load the app. I import the Index.tsx
in the renderer.ts
, and everything is loaded:
renderer.ts:
import "./index"
I'm very new to electron, so if you need more information, please add a comment, and I will add it.