#No styles when deploying

1 messages · Page 1 of 1 (latest)

past iron
#

Hello -- I'm an RWSDK newbie, following the Full Stack Tutorial for the structural pieces (just made an app that did some different functionality). I just ran my first release; it went thru, I found it on cloudflare and it's served on my custom domain, BUT with no style.css ; in fact I get a 404 response, saying that it can't find my styles.css.

Then, I updated my styles import in the Document.tsx to match the demo app GH: import styles from "./styles.css?url"; -- previously I had just passed the filepath into the <link> component directly. This worked fine locally but now the build is failing with...

error during build:
[@tailwindcss/vite:generate:build] Cannot create proxy with a non-object as target or handler
file: /Users/williamhbelew/Hacking/poeia/src/app/styles.css?transform-only
    at new PartialEnvironment (file:///Users/williamhbelew/Hacking/poeia/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:13082:19)

Apologies if this is answered elsewhere, but I have followed to a letter the setup and deployment steps outlined in the tutorial, and am wary of changing my approach to getting styles in there before checking here. Thanks for reading!

slow sparrow
#

Hi @past iron o/ lets figure this out. Would you be able to push up some code for us to take a look at?

past iron
slow sparrow
#
-    "@redwoodjs/sdk": "0.0.75",
+    "rwsdk": "0.1.33",
#

You'd also need to use rwsdk in the imports in the code.

It'd probably be easiest to start over with creating a new project with:

npx create-rwsdk <name_of_project>
past iron
#

Whoa, ok. Ya I ran that same command (unless the docs changed, I just followed the tutorial) about 4mos ago, so that must've been what got installed at that time.

Starting over sounds like a minefield, but maybe easier than I'm thinking?

past iron
#

OK @slow sparrow it seems like just updating the sdk (plus pnpm i) and then updating all the imports isn't sufficient -- now random buttons don't work, and I'm getting no logs or anything. I'm guessing more aboutt he setup changed than just the name of the sdk ;).

So starting over would like ... re-init-ing the project, then manually copy/pasting everything back in but now with correct imports?

slow sparrow
#

I think so 🙂 I think simplest would be following the tutorial again

past iron
#

Alright, thanks. Disappointing tho since I really used the tutorial as a launch point for pretty different functionality. If it is just upgrading the package, do you have a sense of why exactly just updating the version and imports doesn't fix it? Like what else structurally changed with the update (so I can try to figure out a solution that doesn't involve scrapping and starting over)?

orchid hemlock
#

@deft glade had a similar problems going from about the same versioning around .7X something to 1.X so maybe scope some of the steps I did from here:

#1400125975072739338 message

It was mainly:
~RWSDK is slightly different package location:

"rwsdk": "0.1.26",

~Prisma had some decent changes around 6.6 dealing with the query engine

"@prisma/adapter-d1": "~6.8.2",
    "@prisma/client": "~6.8.2",

~added vite plugin to the package.json

"@cloudflare/vite-plugin": "^1.10.1",

prisma.schema file changed slightly:

generator client {
  provider = "prisma-client"

  runtime                = "workerd"
  moduleFormat           = "esm"
  generatedFileExtension = "ts"
  importFileExtension    = "ts"

  output          = "../generated/prisma"
  previewFeatures = ["queryCompiler", "driverAdapters"]
}

I believe the provider changed from prisma-client-js to prisma-client

and then db.ts slightly changed to pull from generated

import { PrismaClient } from "../generated/prisma";
import { PrismaD1 } from "@prisma/adapter-d1";
export type * from "../generated/prisma";

I was able to get his code released as I was debugging my own setup for Prisma issues separate of this.

slow sparrow
# past iron Alright, thanks. Disappointing tho since I really used the tutorial as a launch ...

If it is just upgrading the package, do you have a sense of why exactly just updating the version and imports doesn't fix it? Like what else structurally changed with the update (so I can try to figure out a solution that doesn't involve scrapping and starting over
I understand. If I'm honest, I'd need to investigate to understand why, if you'd prefer to go that route. What I have to go on at this point is random buttons not working.

Plenty changed between 0.0.x and 0.1.x, but the main change was separate RSC and SSR environments. One side effect of this change, for example, is that initial issue would go away:

Cannot create proxy with a non-object as target or handler

As unrelated as they may seem, this ^ was a known issue with tailwind v4's vite plugin assuming there was a SSR environment present - there was no such env <0.1.x.

But that just answers that issue. Current hurdle as you've described it is buttons not working, I'd need to check out the repro repo to understand the hurdles there and what next to do.

Then re @-Ryan Quinn's pointers, it is not only the package itself that changed, but also the standard starter itself. The main change there was upgrading Prisma to >6.8. He detailed the changes required, though we also had a migration guide for that, I can find that for you if you like.

junior urchin
#

Morning @past iron o/

I will take a look at your repo and see if I can get it working for you!

#

From what I can tell it's working

#

Is the button that's not working when you try to create a new element?

#

@past iron What a cool concept! And beautifully implemented.

past iron
#

Hey all, and thanks for the responses. Apologies for the lack of details @slow sparrow , I was a little stymied because I was seeing literally nothing happening in logs/inspector etc once I fired up the app with the fresh imports. I'll investigate further tonight, and see how working thru those changes. You're run down of changes is very helpful for getting my head wrapped around rwsdk, thanks. One question:

  • should it be "rwsdk": "0.1.26" or is latest fine?

I'd definitely appreciate the migration guide, as I've had some prisma headaches already.

Thanks for taking a look @junior urchin , well working when I have the old version "@redwoodjs/sdk": "0.0.75", in there. When I tried updating to "rwsdk": "0.1.33", and the imports, my local version was crapping out without any logging, etc. I guess I thought things would be backward compatible? but I am pretty green to fe/js...

Gonna spin it all up a little later and will share more info.

junior urchin
#

Ok, I checked out your repo and ran it locally - also upgraded all the packages.

#

Let me just confirm if I actually did that...

#

Oh! I did not...

#

It's still on @redwoodjs/sdk

#

Let me try that...

#

Ok, I got it booting

#

my daughter just woke up, i'll BRB

past iron
#

OK do you have a command or path for updating the packages (and changing imports and anything else)? I'm getting vite import issues when trying to boot (Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@rwsdk/vite' imported from /Users/williamhbelew/Hacking/poeia/node_modules/.vite-temp/vite.config.mts.timestamp-1755049640335-ce5aeb60000df.mjs...) actually, I can get it to boot but a few buttons (like login and register) are non-responsive (no logs), and the server times out eventually with

      at async ProxyServer.fetch (file:///Users/williamhbelew/Hacking/poeia/node_modules/.pnpm/[email protected]/node_modules/miniflare/src/workers/core/proxy.worker.ts:173:11)
6:58:18 PM [vite] (client) attempting to recover from error: update to .wrangler/state/v3/do```

 Otherwise I'll just walk thru what @orchid hemlock and @slow sparrow laid out.
orchid hemlock
#

No command, I believe.
I think this was when the vite change was:
https://github.com/redwoodjs/sdk/releases/tag/v0.1.0

Then for Tailwind double check you still have all these steps.
https://docs.rwsdk.com/guides/frontend/tailwind/

I think the vite config update is the main thing. The package updates for moving to rwsdk, updating Prisma, adding Cloudflare dep should get there

Also for Tailwind Justin had mentioned, but make sure especially to add the environment SSR in that Vite config even if empty. Also note a changed redwood locale for its import:

import { defineConfig } from "vite";
import { redwood } from "rwsdk/vite";
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  environments: {
    ssr: {},
  },
  plugins: [redwood(), tailwindcss()],
});
GitHub

Notable changes

Support project-owned cloudflare/vite-plugin dependency
Support renderToStream() and renderToString()
Support opting out of SSR
RSC bundling overhaul (released so far via alpha rel...

RedwoodSDK

RedwoodSDK is a React Framework for Cloudflare. It begins as a Vite plugin that unlocks SSR, React Server Components, Server Functions, and realtime features. Its standards-based router, with support for middleware and interrupters, gives you fine-grained control over every request and response.

slow sparrow
#

Hi @past iron, I went ahead and made a PR for updating your project to the latest 🙂 https://github.com/welew204/poeia/pull/1

I'm able to register and login in both dev and production.

You'll need to do this when you've merged in that branch:

rm -rf .wrangler node_modules
pnpm install

Thank you for sticking with us so long - that was a really early version you were on 😄

I also owe you an apology - you're right that there wasn't much detail to provide, and I don't think my answer helped at all

Hope that helps!

past iron
#

checking it out now!