Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 of 2 tasks
jokklan opened this issue Nov 27, 2024 · 4 comments · May be fixed by #1072
Open
1 of 2 tasks

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

jokklan opened this issue Nov 27, 2024 · 4 comments · May be fixed by #1072
Labels
area:packages issue regarding one of the uploadthing packages more info Please provide more details on the nature of this issue.

Comments

@jokklan
Copy link

jokklan commented Nov 27, 2024 •
edited
Loading

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
@jokklan jokklan added area:packages issue regarding one of the uploadthing packages 🐛 bug: unconfirmed labels Nov 27, 2024
@juliusmarminge
Copy link
Collaborator

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?

@juliusmarminge juliusmarminge added more info Please provide more details on the nature of this issue. and removed 🐛 bug: unconfirmed labels Nov 27, 2024
@jokklan
Copy link
Author

jokklan commented Nov 27, 2024

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
Copy link
Collaborator

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
Copy link
Author

jokklan commented Nov 27, 2024

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 juliusmarminge linked a pull request Nov 27, 2024 that will close this issue
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area:packages issue regarding one of the uploadthing packages more info Please provide more details on the nature of this issue.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: support browser runtime for tw plugin pingdotgg/uploadthing
2 participants
@jokklan @juliusmarminge