Cannot load font files from node_modules

[universse]

What version of Remix are you using?

1.7.6

Steps to Reproduce

Use Remix starter js template.

Install a fontsource font package. Import a fontsource stylesheet to root.jsx. This works as expected. Import a font file from the fontsource node_modules. esbuild throws an error. Copy the font file to app folder and import it. There's no error.

const karlaCSS = require("@fontsource/karla/400.css");

// this works
const karlaFontFromApp = require("~/karla-latin-400-normal.woff2");

// this doesn't
// const karlaFontFromNodeModules = require("@fontsource/karla/files/karla-latin-400-normal.woff2");

export const links = () => {
  return [
    {
      href: karlaFontFromApp,
      as: `font`,
      type: `font/woff2`,
      crossOrigin: `anonymous`,
      rel: `preload`,
    },
    { href: karlaCSS, rel: `stylesheet` },
  ];
};

Here's the error.

Expected Behavior

Import font file from node_modules successfully and get a url.

Perhaps it can even be automatically added for each route.

Actual Behavior

esbuild throws an error.

[machour]

Converting this to a Proposal discussion, as per our Development Process.