how to setup loader - No loader is configured for ".ttf"

[tgmarinho]

hi, how can I setup loaders to other files like .ttf using tsup?

 ✘ tgmarinho@DESKTOP-EOOV6G8  ~/Developer/crow/crow-sdk   develop ±  yarn dev
yarn run v1.22.5
$ tsup --watch
 CLI  Building entry: src/index.ts
 CLI  Using tsconfig: /home/tgmarinho/Developer/crow/crow-sdk/tsconfig.json
 CLI  tsup v5.6.0
 CLI  Using tsup config: /home/tgmarinho/Developer/crow/crow-sdk/tsup.config.ts
 CLI  Running in watch mode
 CLI  Target: node12
 CLI  Cleaning output folder
 CJS  Build start
 > src/components/globalStyle.ts:1:19: error: No loader is configured for ".ttf" files: src/components/fonts/Comforter.ttf
    1 │ import sfWoff from './fonts/Comforter.ttf'

[github-actions]

🎉 This issue has been resolved in version 5.7.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[egoist]

Now I added some default loaders:

        '.aac': 'file',
        '.css': 'file',
        '.eot': 'file',
        '.flac': 'file',
        '.gif': 'file',
        '.jpeg': 'file',
        '.jpg': 'file',
        '.mp3': 'file',
        '.mp4': 'file',
        '.ogg': 'file',
        '.otf': 'file',
        '.png': 'file',
        '.svg': 'file',
        '.ttf': 'file',
        '.wav': 'file',
        '.webm': 'file',
        '.webp': 'file',
        '.woff': 'file',
        '.woff2': 'file',

You can also change it: https://tsup.egoist.sh/#custom-loader

[tgmarinho]

Thank you very much Kevin! I'll try it 👍🙏🎉🥳🚀❤️

[tgmarinho]

Heads up:

Who's using tsup in some project:

add the interface:

fonts.d.ts:

declare module '*.ttf'

Then you can import files *.ttf like:

import fontInter from './fonts/Inter-Regular.ttf'

export const globalCrowStyles = {
  '@font-face': {
    fontFamily: `'Inter', sans-serif`,
    src: `url(${fontInter}) format("truetype")`,
    fontDisplay: 'swap',
    fontWeight: 'normal',
  },
`` 

[ScreamZ]

@egoist The issue is that it doesn't add the dist to the path for files.

I have to do the following but not sure if best way :

const FontsMap: Record<string, string> = {
  "Branding-Bold": path.resolve("dist", require("./Branding-Bold.ttf")),
};

@tgmarinho any idea too ?

[tgmarinho]

@ScreamZ I end up using google fonts. I didn't faced this issue.

[ralyodio]

has anyone found a fix?