[bug]: Paradoxical bug with using withUt or the style itself

[cliffordkleinsr]

Provide environment information

System:
    OS: Windows 11 Pro 23H2
    CPU: AMD Ryzen 7 5700G with Radeon Graphics @ 3.80 GHz
    Memory: 16.0 GB (15.9 GB usable)
    GPU: NVIDIA GTX RTX 4080

  Binaries:
    Node: v20.15.0
    Bun: 1.1.26 
    npm: 10.7.0 

  Browsers:
    Brave Browser: 119.1.60.110
    Chrome: 128.0.6613.139 (Official Build) (64-bit)
    Edge: 128.0.2739.67
    Safari: 17.6
  npm packages:
    "@uploadthing/svelte": "^7.0.2"
    "typescript": "^5.0.0",
    "vite": "^5.0.3"
    "svelte": "^4.2.7",
    "@sveltejs/kit": "^2.5.26",
    "uploadthing": "^7.0.2",

Describe the bug

Using withUt breaks the upload button whereas using the @uploadthing/svelte/styles.css stylesheet by itself without including the withUT utility breaks the navbar.

WithUT does not show any loading state when I begin uploading as shown below:

Using the @uploadthing/svelte/styles.css stylesheet import before my global.css breaks my navbar as shown below

which should look like:

Note Im only using withUt and the style by itself when testing this behavior

Link to reproduction

N/A

To reproduce

Add the withUT utility or the styles to a fresh Sveltekit installation with tailwind installed. But Not Both!

Additional information

I have tried clearing my bun.lockb and node-modules directory and reinstalling the packages. None resolves the issue specifically on deployment to either Vercel or my personal VPS. The stylesheet inclusion works on the dev server however breaks the styles and the navbar on deployment

👨‍👧‍👦 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]

is your repo a monorepo? if you log the outputted tailwind config, do any uploadthing paths get added to content? I've run into edge cases where the paths cannot be auto-found. If so you can add the path to @uploadthing/svelte/dist/** to the content array yourself

const config = withUt({
  // your config
})

console.log(config) // does this have `content: ["/path/to/node_modules/@uploadthing/svelte/dist/**"]`

export default config

[cliffordkleinsr]

This is what the console logs:

{
  darkMode: [ 'class' ],
  content: [ './src/**/*.{html,js,svelte,ts}' ],
  safelist: [ 'dark' ],
  theme: {
    container: { center: true, padding: '2rem', screens: [Object] },
    extend: { colors: [Object], borderRadius: [Object], fontFamily: [Object] }
  },
  plugins: [
    [Function: optionsFunction] {
      __isOptionsFunction: true,
      __pluginFunction: [Function (anonymous)],
      __configFunction: [Function (anonymous)]
    },
    { handler: [Function (anonymous)], config: undefined }
  ]
}

[juliusmarminge]

Is your repo a monorepo?

? Also, What PM are you using?

It's hard to auto-detect the paths in all scenarios. Sometimes require.resolve("@uploadthing/svelte") doesn't resolve to anything resulting in no content src being added. In these cases you can do it yourself with a hardcoded path.

[cliffordkleinsr]

monorepo

Yes, it's a mono repo. Where should I add the required resolve tag

[juliusmarminge]

Are you able to provide a reproduction? Without that, the only advise I can give is to manually add the content paths

export default withUt({
  // your config
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/@uploadthing/svelte/dist/**',
    '../../node_modules/@uploadthing/svelte/dist/**', // or .. back to root, depending on where your package manager keeps the uploadthing distribution
  ]
})

[cliffordkleinsr]

Doing it manually works. repro would be hard as its a very large project

[juliusmarminge]

No worries I managed to reproduce it in the solid example: 1d23a77#diff-c91c28746f5b2978ef621d788f91af58b065126119189296cd628141787aa8cd

Guess it's something odd with Vite cause if i require.resolve("@uploadthing/solid") in the tailwind config file it finds the path, but the same line of code executed from uploadthing/tw doesn't resolve the path...

Will investigate further, but hardcoded paths is a valid workaround for now

[cliffordkleinsr]

Many thanks again @juliusmarminge

[juliusmarminge]

Fixed in #987. Will be released in the next patch update