Module not found: Can't resolve 'v8'

anujraghuvanshi commented 10 months ago

I am getting Module not found: Can't resolve 'v8' while using the package in Nextjs with Typescript.

If I use .js file, then it's working fine, If I use .tsx file then it throws Module Not found error. Even after installing this package, Further packages start reporting issues of missing.

Here's very simple code block which I am using and still it's not working.


import tw from 'twin.macro';

export default function MyComponent() {
  const Container = tw.div`relative bg-gray-200 -mx-8 -mb-8 px-8`;
  return (
    <div>Hey Buddy</div>
  )
}

Here's the package info -

"next": "14.0.0",
"react": "18.0.0",
"twin.macro": "^3.4.0"
"tailwindcss": "^3.0.0",
"typescript": "^5"

Here's withTwin config -

const path = require('path');

const includedDirs = [path.resolve(__dirname, 'src')];

module.exports = function withTwin(nextConfig) {
  return {
    ...nextConfig,
    webpack(config, options) {
      const { dev, isServer } = options;
      // Make the loader work with the new app directory
      const patchedDefaultLoaders = options.defaultLoaders.babel;
      patchedDefaultLoaders.options.hasServerComponents = true;
      patchedDefaultLoaders.options.hasReactRefresh = false;

      config.module = config.module || {};
      config.module.rules = config.module.rules || [];
      config.module.rules.push({
        test: /\.(jsx|js)$/,
        include: includedDirs,
        use: [
          patchedDefaultLoaders,
          {
            loader: 'babel-loader',
            options: {
              sourceMaps: dev,
              plugins: [
                require.resolve('babel-plugin-macros'),
                [
                  require.resolve('babel-plugin-styled-components'),
                  { ssr: true, displayName: true },
                ],
              ],
            },
          },
        ],
      });

      if (!isServer) {
        config.resolve.fallback = {
          ...(config.resolve.fallback || {}),
          fs: false,
          module: false,
          path: false,
          os: false,
          crypto: false,
        };
      }

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options);
      } else {
        return config;
      }
    },
  };
};

Here's the issue I am facing -

SanskarDahiya commented 10 months ago

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

kon-pas commented 10 months ago

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.

hexaaagon commented 7 months ago

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";

I guess that this issue may related into my issue. When i delete the babel config, it works BUT the v8 errors come up.

ben-rogerson / twin.macro