fix: Fix withUt in monorepos (#987)

Co-authored-by: juliusmarminge <[email protected]>

.changeset/shiny-singers-live.md

@@ -0,0 +1,5 @@
+---
+"uploadthing": patch
+---
+
+Fixed withUt to work in monorepos

docs/tailwind.config.ts

@@ -6,13 +6,7 @@ import { withUt } from "uploadthing/tw";
 import typographyStyles from "./typography";
 
 export default withUt({
-  content: [
-    "./src/**/*.{js,mjs,jsx,ts,tsx,mdx}",
-    // TODO: Investigate why resolution doesn't work in workspace.
-    // It works fine in other monorepos (e.g. create-t3-turbo) so appears
-    // to be some local workspace issue, making pnpm fail to resolve `@uploadthing/react`
-    "./node_modules/@uploadthing/react/dist/**/*.js",
-  ],
+  content: ["./src/**/*.{js,mjs,jsx,ts,tsx,mdx}"],
   darkMode: "selector",
   theme: {
     fontSize: {

examples/minimal-appdir/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/minimal-pagedir/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

examples/minimal-solidstart/tailwind.config.js

@@ -2,10 +2,7 @@ import { withUt } from "uploadthing/tw";
 
 /** @type {import('tailwindcss').Config} */
 export default withUt({
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/@uploadthing/solid/dist/**/*.js", // Remove this once #975 is resolved
-  ],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },

examples/profile-picture/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/with-novel/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/with-react-image-crop/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/with-serveractions/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/with-tailwindcss/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

packages/uploadthing/src/tw.ts

@@ -1,4 +1,4 @@
-import { sep } from "node:path";
+import { dirname, sep } from "node:path";
 import type { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin";
 
@@ -10,12 +10,29 @@ const PACKAGES = ["react", "solid", "svelte", "vue"];
 export function withUt(twConfig: Config) {
   const contentPaths = PACKAGES.map((pkg) => {
     try {
-      const resolved = require.resolve(`@uploadthing/${pkg}`);
-      return resolved.split(sep).slice(0, -1).join(sep) + `${sep}**`;
+      const resolved = require.resolve(`@uploadthing/${pkg}`, {
+        paths: [...module.paths, process.cwd()],
+      });
+
+      return dirname(resolved) + sep + "**";
     } catch {
       return null;
     }
-  }).filter(Boolean) as string[];
+  }).filter((s) => s != null);
+
+  if (contentPaths.length === 0) {
+    // eslint-disable-next-line no-console
+    console.warn(`
+[uploadthing]: Unable to resolve path for uploadthing UI packages. As a workaround, you can manually add the paths to your content paths: 
+  - Find where your package manager has installed the distribution files, e.g. './node_modules/@uploadthing/react'.
+    Note: If you have a monorepo, you may need to look up the tree to find the correct path.
+  - Add the path to the 'content' field in your Tailwind configuration: 
+    content: [
+      // your other content paths
+     './node_modules/@uploadthing/react/dist**' // <-- add this line
+    ]
+  `);
+  }
 
   if (Array.isArray(twConfig.content)) {
     twConfig.content.push(...contentPaths);