Exporting next/font into separate library throws Webpack compile error

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro   

Binaries:
  Node: 18.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A

Relevant packages:
  next: 13.4.6
  eslint-config-next: 12.2.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.0.2

Which area(s) of Next.js are affected? (leave empty if unsure)

Font optimization (next/font)

Link to the code that reproduces this issue or a replay of the bug

WIP

To Reproduce

1. Creating a turborepo monorepo setup with a minimum of 2 packages; one which stores the next/font definitions, for example an UI library. And one with a Next.js 13.4.6 application.
2. Add the UI library as a dependency to your web application (npm install -w @my-monorepo/app --save @my-monorepo/ui )
3. Export the fonts from the UI library and import them into Next.js. When importing, the bug will occur

Describe the Bug

When exporting the function logic of next/font into a separate package and trying to import that back into your main application (next.js 13.4.6 app), I get the following error:

(0 , next_font_google__WEBPACK_IMPORTED_MODULE_1__.Calligraffitti) is not a function.

This is inside a default Turborepo setup with NPM. I get the error with both the Google fonts as well as any local font.

My code:

// inside @my-application/ui 
// index.ts
// Has next 13.4.6 installed

import { Calligraffitti } from 'next/font/google'

export const Callif = Calligraffitti({
  weight: '400',
  variable: '--font-callif-test'
})

// inside @my-application/app
// _app.tsx
// Is a fully functional Next.js application inside the monorepo

import { Callif } from '@my-application/fonts'

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps<{ session: Session }>) {

  return (
    <div className={`${Callif.variable}`}>
      <Component {...pageProps}/>
    </div>
  )
}

// tsconfig.json for the main Next.js application
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "./",
    "paths": {
      "components": ["./components"],
      "lib": ["./lib"],
      "pages": ["./pages"],
      "prisma": ["./prisma"],
      "styles": ["./styles"],
      "types": ["./types"],
      "server": ["./server"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
}

My next.config.js is not configured with any Webpack plugins yet. I am aware that this must be an import/export problem

Expected Behavior

For the fonts to load as expected, without throwing Webpack errors.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Start with the @my-application/ui index.ts export and the Next.js app _app.tsx import shown in the report. Reproduce the Turborepo setup with a UI package and Next.js application, then inspect the Webpack compilation path for next/font Google and local font imports. Done means the exported fonts load without the reported “is not a function” error.