Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.6.0: Thu Jul 6 22:20:00 PDT 2023; root:xnu-8020.240.18.702.13~1/RELEASE_ARM64_T6000
Binaries:
Node: 18.17.0
npm: 9.6.7
Yarn: 1.22.19
pnpm: N/A
Relevant Packages:
next: 13.4.12
eslint-config-next: 13.4.12
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.6
Next.js Config:
output: N/AWhich area(s) of Next.js are affected? (leave empty if unsure)
Font optimization (next/font), SWC transpilation
Link to the code that reproduces this issue or a replay of the bug
https://github.com/dtokos/next-unexpected-object-key-type-error
To Reproduce
- Clone the repo
- Install dependencies (npm i)
- Build the app (next build)
The is caused by the following code which is inside layout.tsx:
import { Inter } from 'next/font/google';
const inter = Inter({ 'subsets': 'latin' });Describe the Bug
My team stumbled upon this when they were configuring Eslint. We decided to use the quote-props rule with the following configuration:
{
"rules": [
"quote-props": ["error", "always"]
]
}The linter would instruct us to change the line like this (add quotes):
- const inter = Inter({ subsets: 'latin' });
+ const inter = Inter({ 'subsets': 'latin' });Which, when built, results in the error "Unexpected object key type". I tracked down the error in these two files:
packages/next-swc/crates/next-font/src/font_imports_generator.rs
packages/next-swc/crates/next-transform-font/src/font_imports_generator.rs
The function tries to convert a JS object to JSON. However, the match expression handles only one cas
6EBF
e where the prop is plain a identifier.
I think that you should consider supporting the case where the prop is a string literal. Please note that this assumption is based on a first look. I didn't do a deep dive into how swc and next interoperate. In the meantime, we adjusted our linter settings.
Expected Behavior
I think that using quotes around object properties in this case should compile without errors. I think string literals should not be an issue in the JS object to JSON conversion.
const inter = Inter({ 'subsets': 'latin' });Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response