[bug]: NextJS build fails with withUt tailwind config function

[jokklan]

Provide environment information

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.46 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    npm: 10.2.0 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.5
  npmPackages:
    @uploadthing/react: ^7.1.1 => 7.1.1 
    typescript: ^5.5.4 => 5.5.4 
    uploadthing: ^7.3.0 => 7.3.0

Describe the bug

NextJS fails when building (next build) or starting the dev server (next dev).

The following error log is from the dev server:

 ⨯ node:module
Module build failed: UnhandledSchemeError: Reading from "node:module" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Import trace for requested module:
node:module
./node_modules/uploadthing/tw/index.js
./tailwind.config.ts
./src/lib/tailwind.ts
./src/hooks/use-breakpoint.ts

Here is the content of each file:

./src/lib/tailwind.ts

import resolveConfig from "tailwindcss/resolveConfig"

import unresolvedConfig from "../../tailwind.config"

export const tailwindConfig = resolveConfig(unresolvedConfig)

./tailwind.config.ts

import type { Config } from "tailwindcss"

import { withUt } from "uploadthing/tw"

export default withUt({
  darkMode: "selector",
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        overlay: "hsl(var(--overlay))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        success: {
          DEFAULT: "hsl(var(--success))",
          foreground: "hsl(var(--success-foreground))",
        },
        warning: {
          DEFAULT: "hsl(var(--warning))",
          foreground: "hsl(var(--warning-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
}) satisfies Config

Link to reproduction

https://stackblitz.com/edit/github-vnrqpe?file=src%2Fapp%2Fpage.tsx

To reproduce

Importing the tailwind config wrapped with withUt will fail in build.

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Code of Conduct

• I agree to follow this project's Code of Conduct

[juliusmarminge]

yea currently withUT requires Node runtime to resolve the content paths of the react/vue lib etc to find what classNames to include.

What are you doing that requires importing the tailwind file in a client component?

[jokklan]

Hi @juliusmarminge

We import the tailwind config in our typescript code (client side), for example to reuse the different breakpoint definitions in a useBreakpoint hook.

[juliusmarminge]

so you could declare a client-safe config in lib/tailwind.ts and then export default withUt(config) in tailwind.config.ts

we might be able to do some conditional exports to make the withUt wrapper a noop in non-node environments 🤔

[jokklan]

Thanks for the suggestion, that worked!

The resolveConfig function is part of the official tailwind documentation: https://tailwindcss.com/docs/configuration. And it's only available client side, i.e. in a non-node environment. So at least for our use-case would it be great if withUt was a noop it those cases 😄

[juliusmarminge]

Can you try out the canary from here: #1072

[markflorkowski]

@jokklan - Have you had a chance to try out the canary that Julius linked?

pnpm add @uploadthing/react@7.1.2-canary.2352c0f
pnpm add uploadthing@7.3.1-canary.2352c0f

[juliusmarminge]

Just tested and it works