The font loader should tolerate backtick strings without template variables
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/modest-mestorf-42dh9l
To Reproduce
- Add a
next/fontcall with backtick strings:
import {Inter} from 'next/font/google';
const inter = Inter({
subsets: [`latin`],
display: `swap`,
variable: `--font-inter`,
});
- Run the application
Current vs. Expected behavior
Next.js crashes on template-less backtick strings when used within a localFont call. It should tolerate such strings, as they are fully static. Some lint rules even enforce their use everywhere possible, rather than ' or ".
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000
Binaries:
Node: 20.11.1
npm: 10.2.4
Yarn: 4.1.1
pnpm: N/A
Relevant Packages:
next: 14.1.3
eslint-config-next: 14.1.3
react: 18.2.0
react-dom: 18.2.0
typescript: 5.4.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Font optimization (next/font)
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local)
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the next/font font optimization entry points involved in localFont, using the provided CodeSandbox reproduction with static backtick strings. Check the behavior under next dev and next build, and consider the issue complete when template-less backtick strings are accepted without a crash.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100