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

In the latest main branch environment
No configuration file
Run the bun dev and go to http://localhost:3000/
Got Failed to compile error

Environment

- 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

miurla commented 1 week ago

Previously, there was an issue with fonts in a specific version of next.js, but it has been resolved: https://github.com/miurla/morphic/issues/16#issuecomment-2058410971 . Similar error reports also seem to be caused by the version of next.js: https://github.com/vercel/next.js/discussions/61886 In the current version, it seems to be fixed. It appears to occur under certain specific conditions.

I will not remove Google Fonts for this reason.

SzilvasiPeter commented 1 week ago

Somehow, I could not make it work by the Next.js version update. The only solution was the removal of the fonts in my (corporate network) end.

I will abandon the PR and adapt the code separately. In any case, thanks for the comment!

miurla commented 1 week ago

Thank you for understanding. If anything else comes up, please submit a bug report.

miurla / morphic

[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