Closed universse closed 1 year ago
1.7.6
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.
root.jsx
node_modules
app
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.
Import font file from node_modules successfully and get a url.
Perhaps it can even be automatically added for each route.
esbuild throws an error.
Converting this to a Proposal discussion, as per our Development Process.
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 fontsourcenode_modules
. esbuild throws an error. Copy the font file toapp
folder and import it. There's no error.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.