[turbopack] "Error: invalid type: string" when using variable on next/font

[ZakariaBenali]

What version of Turbopack are you using?

next: 13.1.1

What package manager are you using / does the bug impact?

pnpm

What operating system are you using?

Linux

Describe the Bug

Using the variable property on next/font with Turbopack causes the following error:
[500] error: invalid type: string "--font-inter", expected a sequence at line 1 column 95

The font is declared as per the docs:

import { Inter } from '@next/font/google'
const inter = Inter({
  subsets:['latin'],
  variable: '--font-inter',
})

Important to note: this only happens when you add the variable property, and you don't have to apply the font style to the app to experience the issue, just declaring the font like so with variable property causes the app to crash.

Expected Behavior

The next/font with variable property works fine without Turbopack.

To Reproduce

1. Simply create a fresh app using the latest version of next.js (13.1.1 by the time I'm writing this issue).
2. Declare any google font on _app.tsx as per the doc:

import { Inter } from '@next/font/google'
const inter = Inter({
  subsets:['latin'],
  variable: '--font-inter',
})

3. Run the app on turbo mode 'pnpm dev --turbo'

Reproduction Repo

No response

[pan93412]

I found the exact issue – seems like a wrong declaration? Not sure why the developer declare this as a Vec<T> while specification says that this should be a string: https://nextjs.org/docs/api-reference/next/font#variable

turbo/crates/next-core/src/next_font_google/options.rs

Line 23 in aa7e60b

pub variable: Option<Vec<String>>,

Changing variable: 'str' to variable: ['str'] suppress this issue. @ts-expect-error may be needed.

[beldur]

I have the same issue. Can't use @next/font/google with a variable.

So this documentation breaks with turbopack: https://nextjs.org/docs/api-reference/next/font#css-variables

[jridgewell]

/cc @wbinnssmith

[minega25]

Hello There,

Still facing the same issue when setting fonts with tailwindcss according to below instructions: https://nextjs.org/docs/basic-features/font-optimization#with-tailwind-css