Bug: withTV causes "Module not found: Can't resolve 'fs'" error in Next.js

[phuoclt-sens]

When using the withTV function from tailwind-variants in a Next.js project, I encounter the following error:
Module not found: Can't resolve 'fs'

To Reproduce

Steps to reproduce the behavior:
Set up a Next.js project with tailwindcss and tailwind-variants.
Use withTV in the Tailwind configuration, such as in tailwind.config.js:

const { withTV } = require('tailwind-variants/transformer');

module.exports = withTV({
  theme: {
    extend: {
      // Your customizations
    },
  },
});

Run the Next.js development server using npm run dev.
Observe the error in the terminal or browser console.

System Information:

Next.js version: 14.2.5
Node.js version: 20.16.0
Tailwind CSS version: 3.4.1
Tailwind Variants version: 0.2.1
Operating System: macOS

[phamhuutinh0605]

Ohhhh, i have same issue @@

[jmichaliga]

Also having the same problem with a NextJS project. Is there any update on this with a webpack polyfill?

[kpyszkowski]

Resolved by adding Webpack exception for fs module in Next config:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve = {
        ...config.resolve,
        fallback: {
          fs: false,
        },
      }
    }
    return config
  },
}

export default nextConfig