[BUG] Module not found: Can't resolve '@vercel/turbopack-next/internal/font/google/font'

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Vercel Runtime Logs

- [ ] I have checked the Vercel Runtime Logs for errors (if applicable)

### Current Behavior

# Introduction

Probably this error occurs because I am using a workplace laptop, which blocks the communication of some websites. I tried with and without VPN, however the issue is present.

# Workaround

For me, the workaround is to delete the Google font import and using the default font instead. The modification at the `app/layout.tsx` file:

at the `app/layout.tsx` file:

```
import type { Metadata, Viewport } from 'next'
- import { Inter as FontSans } from 'next/font/google'
import './globals.css'
import { cn } from '@/lib/utils'
import { ThemeProvider } from '@/components/theme-provider'
import Header from '@/components/header'
import Footer from '@/components/footer'
import { Sidebar } from '@/components/sidebar'
import { Toaster } from '@/components/ui/sonner'
import { AppStateProvider } from '@/lib/utils/app-state'

- const fontSans = FontSans({
-   subsets: ['latin'],
-   variable: '--font-sans'
- })

const title = 'Morphic'
const description =
  'A fully open-source AI-powered answer engine with a generative UI.'

export const metadata: Metadata = {
  metadataBase: new URL('https://morphic.sh'),
  title,
  description,
  openGraph: {
    title,
    description
  },
  twitter: {
    title,
    description,
    card: 'summary_large_image',
    creator: '@miiura'
  }
}

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  minimumScale: 1,
  maximumScale: 1
}

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
+      <body className={cn('font-sans antialiased')}>
-      <body className={cn('font-sans antialiased', fontSans.variable)}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <AppStateProvider>
            <Header />
            {children}
            <Sidebar />
            <Footer />
            <Toaster />
          </AppStateProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
```

# Stack trace

There are multiple **Module not found** error when importing the Google fonts:

```
Module not found: Can't resolve '@vercel/turbopack-next/internal/font/google/font'
  51 |   font-display: swap;
  52 |   src: url(@vercel/turbopack-next/internal/font/google/font?{%22url%22:%22https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2%22,%22preload%22:false,%22has_size_adjust%22:true}) format('woff2');
> 53 |   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
     |         ^
  54 | }
  55 | /* latin */
  56 | @font-face {

Import map: Resolved by import map


https://nextjs.org/docs/messages/module-not-found


    at processIssues (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/dev/turbopack-utils.js:229:15)
    at handleRouteType (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/dev/turbopack-utils.js:386:17)
    at async Object.ensurePage (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/dev/hot-reloader-turbopack.js:647:17)
    at async DevBundlerService.ensurePage (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/lib/dev-bundler-service.js:18:20)
    at async DevServer.ensurePage (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/dev/next-dev-server.js:551:9)
    at async Object.ensure (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/dev/next-dev-server.js:169:17)
    at async DevRouteMatcherManager.matchAll (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/future/route-matcher-managers/dev-route-matcher-manager.js:96:13)
    at async DevRouteMatcherManager.match (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/future/route-matcher-managers/default-route-matcher-manager.js:155:26)
    at async NextNodeServer.handleCatchallRenderRequest (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/next-server.js:228:31)
    at async DevServer.handleRequestImpl (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/base-server.js:816:17)
    at async /home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/dev/next-dev-server.js:339:20
    at async Span.traceAsyncFn (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/trace/trace.js:154:20)
    at async DevServer.handleRequest (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
    at async invokeRender (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/lib/router-server.js:174:21)
    at async handleRequest (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/lib/router-server.js:353:24)
    at async requestHandlerImpl (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/lib/router-server.js:377:13)
    at async Server.requestListener (/home/z0190983/ws/personal/javascript/morphic_fork/node_modules/next/dist/server/lib/start-server.js:141:13)
 ⚠ [next]/internal/font/google/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n_wU-s.woff2
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2.
```

### Expected Behavior

The application compiles without any error.

### Steps To Reproduce

1. In the latest `main` branch environment
2. No configuration file
3. Run the `bun dev` and go to <http://localhost:3000/>
4. Got **Failed to compile** error

### Environment

```markdown
- OS: Ubuntu 22.04.4 LTS
- Browser: Mozilla Firefox 125.0.3
```


### Anything else?

Google font compile error: https://stackoverflow.com/q/74889692/10721627
Solution reference: https://stackoverflow.com/a/75476382/10721627

Navigation Menu

Uh oh!

[BUG] Module not found: Can't resolve '@vercel/turbopack-next/internal/font/google/font' #329

Is there an existing issue for this?

Vercel Runtime Logs

Current Behavior

Introduction

Workaround

Stack trace

Expected Behavior

Steps To Reproduce

Environment

Anything else?

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Uh oh!

[BUG] Module not found: Can't resolve '@vercel/turbopack-next/internal/font/google/font' #329

Description

Is there an existing issue for this?

Vercel Runtime Logs

Current Behavior

Introduction

Workaround

Stack trace

Expected Behavior

Steps To Reproduce

Environment

Anything else?

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions