Typescript drei Text3D R3F Font

Hi all,

Having a slight issue with typescript and drei Text3D. I followed the instructions on GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber. Went into Google fonts, downloaded a font, converted to JSON through Facetype.js. I then loaded it in and it works! However, typescript is throwing an error when compiling. I tried disabling linting as show below but I’m still getting the error. Any ideas on how to get around this?

*EDIT: I was able to get around this by adding // @ts-nocheck to the top of the file. Keeping this post open incase anyone has more insights on this.

*EDIT2: Also had to add // eslint-disable-next-line @typescript-eslint/ban-ts-comment before // @ts-nocheck as the typescript compiler was complaining about that as well.

Type error: Type '{ glyphs: { "0": { ha: number; x_min: number; x_max: number; o: string; }; "1": { ha: number; x_min: number; x_max: number; o: string; }; "2": { ha: number; x_min: number; x_max: number; o: string; }; "3": { ha: number; x_min: number; x_max: number; o: string; }; ... 889 more ...; Ὅ: { ...; }; }; ... 9 more ...; css...' is not assignable to type 'string | FontData'.
  Type '{ glyphs: { "0": { ha: number; x_min: number; x_max: number; o: string; }; "1": { ha: number; x_min: number; x_max: number; o: string; }; "2": { ha: number; x_min: number; x_max: number; o: string; }; "3": { ha: number; x_min: number; x_max: number; o: string; }; ... 889 more ...; Ὅ: { ...; }; }; ... 9 more ...; css...' is not assignable to type 'FontData'.
    Types of property 'glyphs' are incompatible.
      Type '{ "0": { ha: number; x_min: number; x_max: number; o: string; }; "1": { ha: number; x_min: number; x_max: number; o: string; }; "2": { ha: number; x_min: number; x_max: number; o: string; }; "3": { ha: number; x_min: number; x_max: number; o: string; }; ... 889 more ...; Ὅ: { ...; }; }' is not assignable to type '{ [k: string]: Glyph; }'.
        Property '"0"' is incompatible with index signature.
          Property '_cachedOutline' is missing in type '{ ha: number; x_min: number; x_max: number; o: string; }' but required in type 'Glyph'.

  38 |     /* tslint:disable */
  39 |     /* eslint-disable */
> 40 |     <Text3D font={roboto}>
     |             ^
  41 |       T4
  42 |       <meshNormalMaterial />
  43 |     </Text3D>

You can also just cast the font as any and that will work too. In my opinion that’s a better solution as I do not believe we should ignore any erros

You can’t import from public that’s impossible. All you need to do is to give it the url:

<Text3D font="/roboto.json">

the file that you import, and imports are only valid if the resource is in /src, could also be used, but it needs to be of type FontData, and since you just have a json blob TS will complain. you can cast it though

import { FontData } from '@react-three/drei'
import font from './assets/roboto.json'

<Text3D font={font as FontData} />

though why, just lay the file into /public and use the url.