I am getting Module not found: Can't resolve 'v8' whi

I'm also facing this issue with "next": "^13.5.6", </p

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Module not found: Can't resolve 'v8' about twin.macro HOT 3 OPEN

anujraghuvanshi commented on June 5, 2024 7

Module not found: Can't resolve 'v8'

from twin.macro.

Comments (3)

kon-pas commented on June 5, 2024 1

First, create babel.config.js in the root of your project:

// babel.config.js
module.exports = {
  presets: ['next/babel'],
  plugins: ['macros'],
}

Then remove next/font from src/app/layout.js, for example:

// src/app/layout.js
import GlobalStyles from '../styles/GlobalStyles'
import StyledComponentsRegistry from '../lib/registry'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <StyledComponentsRegistry>
          <GlobalStyles />
          {children}
        </StyledComponentsRegistry>
      </body>
    </html>
  )
}

The above resolved the issue for me.

For more on why we have to remove next/font, see this comment.

from twin.macro.

SanskarDahiya commented on June 5, 2024

I'm also facing this issue with "next": "^13.5.6",

from twin.macro.

hexaaagon commented on June 5, 2024

Hi @kon-pas, thanks for solution. I'm having a problem after placing your solution. this is the error:

 ⨯ ./src/app/[locale]/(pages)/page.tsx:25:36
Syntax error: Unexpected token, expected ","

  23 | import ContactSection from "./contact.sect";
  24 |
> 25 | export default function Home(request: {
     |                                     ^
  26 |   params: { locale: "id" | "en" };
  27 |   searchParams: {
  28 |     changeLang?: "true" | "false";