miurla/morphic

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

SzilvasiPeter opened this issue · 3 comments

SzilvasiPeter commented

Is there an existing issue for this?

  • 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

- 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

Previously, there was an issue with fonts in a specific version of next.js, but it has been resolved: #16 (comment) . Similar error reports also seem to be caused by the version of next.js: vercel/next.js#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

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!

  • 👍1
miurla commented

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