File name too long (os error 63) since > 14.2

[cuquo]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/turbo-pack-fonts-bug-5v8hqh

To Reproduce

Using turbopack with next/font throws an error 63 (file name too long) by importing some fonts, it's happening to uswith this one

import { Roboto_Flex } from 'next/font/google';

export const robotoFlex = Roboto_Flex({
  subsets: ['latin'],
  variable: '--font-roboto-flex',
});

Current vs. Expected behavior

Fonts should load correctly with turbopack as it does in v14.1

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.22
  pnpm: 8.14.1
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

13.1 works fine with turbopack and next/fonts

_PACK-3012

[poorvasingh04]

Although passing axes should be optional, however a quickfix that worked for me is to pass axes like this while defining the font.

export const robotoFlex = Roboto_Flex({
  subsets: ["latin"],
  weight: "variable",
  axes: ["GRAD"],
  variable: "--font-roboto-flex",
});

Options for axes can be found here - https://fonts.google.com/variablefonts?vfquery=roboto+flex#font-families

[connectshruti]

Thank you for sharing this solution! It's interesting to see how explicitly specifying the axes parameter helps TurboPack optimize the font loading process, resulting in bundled font files with shorter file names. This optimization prevents the error caused by excessively long file names during the bundling process. Great find!