Loading a non typed lib into Electron + React + Typescript

73 Views Asked by At

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.

0

There are 0 best solutions below