Example for troika-three-text has errors under typescript and at runtime

[Mario Valle]

Trying to use troika-three-text inside my Three.js + Vue + Electron + Typescript application. I started with the npm page example after creating an initial type definition file troika-three-text.d.ts:

export class Text {
    constructor();
    sync(): void;

	public text: string;
	public fontSize: number;
	public color: number;
}

Now the example (from https://www.npmjs.com/package/troika-three-text) complains that myText cannot be added to the scene myScene.add(myText) with the error: Argument of type 'Text' is not assignable to parameter of type 'Object3D<Object3DEventMap>'. Type 'Text' is missing the following properties from type 'Object3D<Object3DEventMap>': isObject3D, id, uuid, name, and 72 more.
If I ignore this error and run the example I have this runtime error:

Unhandled rejection TypeError: Failed to fetch
    at M (http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:3831:28)
    at P (http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:3847:53)
    at t.getFontsForString (http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:3851:9)
    at resolveFallbacks (http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:4037:35)
    at http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:4032:7
    at calculateFontRuns (http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:4115:7)
    at Object.typeset (http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:4158:5)
    at http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:4977:20
    at new Promise (<anonymous>)
    at http://localhost:5173/node_modules/.vite/deps/troika-three-text.js?v=98bce5b6:4976:14

There is something obvious missing that I don't see.
Could you help me?

Versions:
troika-three-text: 0.49.0
three.js: 0.159.0
OS: Windows 11

[Jason Johnston]

For the type declaration issue, you may just be missing extends Mesh.

For the runtime error I don't have enough to go on. It looks like it's failing to fetch the font file(s).

[Mario Valle]

After a long hiatus, I tried again to use troika in my application.
If I disable the Content-Security-Policy header in index.html everything works correctly, so thanks for the nice library. If I add connect-src ws: https: to the content security policy header it works also with my policy in place. FYI here is it:

<meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' data: file:; script-src 'self' blob:;
      style-src 'self' 'unsafe-inline'; img-src 'self' data:;
      font-src 'self' file:; worker-src 'self' blob:; connect-src ws: https:" />

Sure there is too much authorized, but for now it works.
I close this issue, but will open another one about local font files.
Thanks!
mario

[Mario Valle]

OK, cleaned the security policy. The following one works:

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self' data:; script-src 'self' blob:;
      style-src 'self' 'unsafe-inline'; img-src 'self' data:;
      connect-src ws: https:" />