next/font bug when code is instrumented

[frattaro]

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 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.1.1
  eslint-config-next: 13.1.1
  react: 18.2.0
  react-dom: 18.2.0

Which 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

https://github.com/frattaro/next-font-repro

To Reproduce

Clone the repo
Run npm i
Run npm run dev

Describe the Bug

When swc-plugin-coverage-instrument swc plugin is used this error from @next/font is triggered:

Expected Behavior

SWC is expected to be able to build without issue.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[frattaro]

My colleague (@jch2617) pointed out that setting forceSwcTransforms: true fixes the issue.

EDIT: did not fix in CI

[xinha-sh]

@frattaro Were you able to solve this ?

[frattaro]

@xinha-sh nope, @kwonoj (the author of the swc plugin) might be interested but it feels more like an overly-restrictive @next/font issue.

[frattaro]

updated repro to use builtin next/font. fails w/13.2.0

[frattaro]

Updated repro package-lock and retested with 13.2.3-canary.1, no change.

[frattaro]

Well now it just straight up crashes, but it's nice to see something changed

[frattaro]

No change with latest package updates

[frattaro]

I'm following this until swc-plugin-coverage-instrument works again with next-swc: kwonoj/swc-plugin-coverage-instrument#202

[frattaro]

And we're back!

[finn-orsini]

+1 I am experiencing the same with next/font/local and swc-plugin-coverage-instrument:

./src/ui/theme/theme.tsx
Error: 
  × Font loaders must be called and assigned to a const in the module scope
 15 │ import localFont from 'next/font/local';
 16 │ 
 17 │ export const interFont = localFont({
    ·                          ─────────
 18 │   variable: '--font-inter',
 19 │   src: [
 20 │     {
    ╰────

[mvshmakov]

The issue with Google fonts is present as well when using swc-loader with swc-plugin-coverage-instrument (and without as well) in Storybook:

Stacktrace

next_font_google__WEBPACK_IMPORTED_MODULE_1__.Inter is not a function

./src/components/Fonts/index.tsx@http://localhost:6006/main.iframe.bundle.js:6820:1198
options.factory@http://localhost:6006/runtime~main.iframe.bundle.js:687:31
__webpack_require__@http://localhost:6006/runtime~main.iframe.bundle.js:28:33
fn@http://localhost:6006/runtime~main.iframe.bundle.js:344:21
./.storybook/preview.tsx@http://localhost:6006/main.iframe.bundle.js:6758:98
options.factory@http://localhost:6006/runtime~main.iframe.bundle.js:687:31
__webpack_require__@http://localhost:6006/runtime~main.iframe.bundle.js:28:33
fn@http://localhost:6006/runtime~main.iframe.bundle.js:344:21
getProjectAnnotations@http://localhost:6006/main.iframe.bundle.js:19392:2055
../../node_modules/synchronous-promise/index.js/_runResolutions/<@http://localhost:6006/sb-preview/runtime.js:4:80022
_runResolutions@http://localhost:6006/sb-preview/runtime.js:4:79963
then@http://localhost:6006/sb-preview/runtime.js:4:77505
getProjectAnnotationsOrRenderError@http://localhost:6006/sb-preview/runtime.js:74:13211
initialize@http://localhost:6006/sb-preview/runtime.js:74:12536
./storybook-config-entry.js@http://localhost:6006/main.iframe.bundle.js:19408:9
options.factory@http://localhost:6006/runtime~main.iframe.bundle.js:687:31
__webpack_require__@http://localhost:6006/runtime~main.iframe.bundle.js:28:33
__webpack_exec__@http://localhost:6006/main.iframe.bundle.js:19764:67
@http://localhost:6006/main.iframe.bundle.js:19765:550
__webpack_require__.O@http://localhost:6006/runtime~main.iframe.bundle.js:80:23
@http://localhost:6006/main.iframe.bundle.js:19766:56
webpackJsonpCallback@http://localhost:6006/runtime~main.iframe.bundle.js:1302:46
@http://localhost:6006/main.iframe.bundle.js:1:85

[frattaro]

Updated repro repo. With next@13.3.5-canary.5 it silently crashes:

[mathurmehul001]

@frattaro @finn-orsini were you able to solve this? Getting the same error.

[frattaro]

@mathurmehul001 I haven't checked since my last update (2 weeks ago). Since then, the next team introduced some breaking changes in a patch fix that made it so I have to wait until AWS makes changes to their stuff for me to update.

[alamenai]

I faced the same issue:

Any suggestions guys?

[mathurmehul001]

@MenaiAla I faced this issue because of conflicts between swc-plugin-coverage-instrument and next.js font. Wasn't able to fix this.

[kwonoj]

This is neither next.js's problem or plugin's, it's a conflict requirement between 2 features.

next/font requires to have specific scope to call, but coverage wraps calls into paren scope to inject coverage counter. There's no easy way to detect those 2 conflict detect each other.

Disabling coverage to specific offending line allows to skip coverage attempts to change unexpected scopes to the next/font.

/* istanbul ignore next */
export const lato = Lato({
  subsets: ["latin"],
  weight: ["400", "700"],
  style: ["normal", "italic"]
});

[kwonoj]

Closing issue as answered.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.