Can't resolve 'v8' (Twin + Next.js + Styled Components)

Scipion commented 10 months ago

Hi all, Following the basic steps for a new Next.js + styled components in here: https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components

I executed pnpm create next-app and I selected Typescript: No ESLint: Yes Tailwind: No src/ directory: Yes App Router: Yes import alias: No

It failed while compiling with the following error:

./node_modules/.pnpm/jiti@1.20.0/node_modules/jiti/dist/babel.js:1:104348
Module not found: Can't resolve 'v8'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/jiti@1.20.0/node_modules/jiti/lib/index.js
./node_modules/.pnpm/tailwindcss@3.3.3/node_modules/tailwindcss/lib/lib/load-config.js
./node_modules/.pnpm/tailwindcss@3.3.3/node_modules/tailwindcss/lib/public/load-config.js
./node_modules/.pnpm/tailwindcss@3.3.3/node_modules/tailwindcss/loadConfig.js
./node_modules/.pnpm/twin.macro@3.4.0_tailwindcss@3.3.3/node_modules/twin.macro/macro.js
./src/styles/GlobalStyles.js

cant_resolve_v8

For some reason jiti is using require("v8") and it fails, but it has also some requirements for fs, process and other node libraries witch don't fail (not sure why).

There is no extra steps I can describe because I just created a brand new next project and followed the specified in here https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components

Link to the repo: https://github.com/Scipion/next-app-1

kon-pas commented 10 months ago

Try adding either macros or babel-plugin-macros to the list of Babel plugins, like so:

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

kon-pas commented 10 months ago

The above resolved the issue for me, but if it still persists, you can also add the v8 module to the Webpack config, like so:

// next.config.js
const withTwin = require('./withTwin.js')

/**
 * @type {import('next').NextConfig}
 */
module.exports = withTwin({
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (isServer)
      config.resolve.fallback = {
        ...config.resolve.fallback,
        v8: require.resolve('v8'),
      }
    return config
  },
})

Scipion commented 10 months ago

Hi @kon-pas, thanks a lot for trying to fix it.

I've applied both changes, but just with the first one I get the following error:

Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict

Screenshot from 2023-10-19 11-27-58

As per what the docs explain how to resolve this new issue:

To address this issue, you should remove your custom Babel configuration (e.g. .babelrc) and instead make use of the Next.js Compiler. This ensures compatibility between your Babel configuration and next/font.

By doing that we're getting back the initial error:

You can find the changes in a branch here: https://github.com/Scipion/next-app-1/tree/fix/babel-config-n-v8-fallback

kon-pas commented 10 months ago

Hi @Scipion Remove next/font from layout.js, like so:

// 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>
  )
}

twin.macro currently only supports Babel, not SWC (#516). We must choose one and if we want to use twin.macro, we have to stick to Babel. Next suggests to remove the Babel config, because some of Next features, like next/font, are intended solely for SWC. You have to get rid of those SWC-only features.

Scipion commented 10 months ago

So the conclusion is that whether we use twin.macro (and babel) or next/font (and swc).

I'm adding here a small research

twin.macro Support SWC discussion (thanks @kon-pas): https://github.com/ben-rogerson/twin.macro/discussions/516

"Babel and next/font Conflict" in Next.js: https://nextjs.org/docs/messages/babel-font-loader-conflict

Closing this issue due twin.macro still can't work with swc, just babel.

anujraghuvanshi commented 10 months ago

What is the possible solution here? to quickly fix ?

Scipion commented 10 months ago

What is the possible solution here? to quickly fix ?

It seems there is no solution yet, weather you use twin.macro and babel or next/font and swc.

anujraghuvanshi commented 10 months ago

Can you plz help with babel config? I am getting next/font issues if I am trying to configure anything with babel.

Scipion commented 10 months ago

next/font won't work with babel as explained here https://github.com/ben-rogerson/twin.macro/issues/833#issuecomment-1771166579

ben-rogerson / twin.macro

Can't resolve 'v8' (Twin + Next.js + Styled Components) #833