How to properly reference my font asset from my npm package?

[MilesWinston23]

I have two packages called "library and "nextjs". "library" is a dependency of "nextjs" and is exporting an MUI ThemeProvider component that exports a global @font-face in the CssBaseline component. My @font-face is using a custom .woff font I have included in the package and is being built with parcel.

This custom ThemeProvider wraps everything in the nextjs app.

When I look at the console to see if there are any errors, I see this.

Not allowed to load local resource: file:///project/exporting-assets-example/packages/nextjs/.next/server/pages/raleway-bold.e83afe7e.woff

How do I properly reference my font so I don't get this error?

Here is my codesandbox example.

[mischnic]

I would use module instead of main. Webpack correctly understands new URL("...", import.meta.url) but not new URL("...", __filename) (which was output using main)

--- packages/library/package.json
+++ packages/library/package.json
@@ -2,7 +2,7 @@
   "name": "library",
   "version": "1.0.0",
   "source": "src/index.jsx",
-  "main": "dist/main.js",
+  "module": "dist/main.js",
   "license": "MIT",
   "dependencies": {
     "@emotion/react": "^11.10.5",

But there surely has to be a better way of using a monorepo with Next.js? Ideally you wouldn't have to compile all packages separate and let the main next dev process handle everything.

[MilesWinston23]

@mischnic

Is there a way to keep the "main" field but also include "module"?

[mischnic]

Just put both of them there:

  "main": "dist/main.js",
  "module": "dist/module.js",