workers-sdk
workers-sdk copied to clipboard
cloudflare
BUG:Vite Cloudflare Plugin SolidJs/Hono
What versions & operating system are you using?
"@cloudflare/vite-plugin": "^1.2.3", "wrangler": "^4.17.0"
Please provide a link to a minimal reproduction
https://github.com/JonathanRiche/cf-solid-vite
Describe the Bug
With the cloudflare vite plugin I can't get Solid JS to work on the server via CF workers
For my current app(in dev mode) i'm running Wrangler cli for the server ie hono routes etc and Vite to ONLY bundle the frontend. When i try to move that projects config over to just using Vite in one cli command i get error's like the ones below.
I've made a sample repo with minimal code to show the issue when trying to use the cloudflare vite plugiin with Hono & Solid(specificaly errors related to Solid)
The server routes look like the following :
import { Hono } from 'hono'
import { renderToString, HydrationScript, generateHydrationScript } from 'solid-js/web'
import App from './App';
const app = new Hono()
app.get('/', (c) => {
const html = renderToString(() => <>
Hello from SolidJS!
<HydrationScript />
</>)
return c.html(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hono + SolidJS</title>
<link href="/src/style.css" rel="stylesheet">
${generateHydrationScript()}
</head>
<body>
${html}
</body>
</html>
`)
})
app.get('/test', (c) => {
const html = renderToString(() => <App />)
return c.html(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hono + SolidJS</title>
<link href="/src/style.css" rel="stylesheet">
</head>
<body>
${html}
</body>
</html>
`)
})
(all in the sample repo)
Please provide any relevant error logs
Vite warning : You appear to have multiple instances of Solid. This can lead to unexpected behavior.
Error: Error: renderToString is not supported in the browser, returning undefined
at throwInBrowser (/home/rtg/development/examples/honolatest/node_modules/.vite/deps_honolatest/solid-js_web.js:694:15)
at renderToString (/home/rtg/development/examples/honolatest/node_modules/.vite/deps_honolatest/solid-js_web.js:698:3)
at /home/rtg/development/examples/honolatest/src/index.tsx:32:16
at dispatch (/home/rtg/development/examples/honolatest/node_modules/.vite/deps_honolatest/hono.js:22:23)
at /home/rtg/development/examples/honolatest/node_modules/.vite/deps_honolatest/hono.js:5:12
at /home/rtg/development/examples/honolatest/node_modules/.vite/deps_honolatest/hono.js:906:31
at Hono2.#dispatch (/home/rtg/development/examples/honolatest/node_modules/.vite/deps_honolatest/hono.js:916:7)
at Hono2.fetch (/home/rtg/development/examples/honolatest/node_modules/.vite/deps_honolatest/hono.js:919:26)
at Proxy.Wrapper.
Hi @JonathanRiche, thanks for the issue 🙂
There might be something that we need to adjust in our plugin, or maybe something would need to be fixed in solid's plugin instead, we'll need to investigate this to be sure.
In any case thanks so much for the minimal reproduction as that is always extremely helpful 🙏 , is there any chance you could also share a version of the minimal reproduction that uses your original setup (using the wrangler cli and vite only to bundle)? With that we could more easily compare the two and narrow down what's going wrong 🙏
Ok on the same repo link i added a frontend directory and a sample.vite.config.ts to show a minmal repro of the way i have to run it ie in the way its working right now Solid is only client siide and vite is proxying the wrangle backend(wehn pushed to prod its utilizing ASSETS.fetch) the sample.vite.config.ts looks like this and in local im doing
bun run vite dev
bunx wrangler dev
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
export default defineConfig(({ mode }) => ({
plugins: [
solid(),
],
optimizeDeps: {
include: ['solid-js', 'solid-js/web'],
},
server: {
proxy: {
'/test': 'http://localhost:8787',
'^/$': {
target: 'http://localhost:8787',
changeOrigin: true
},
}
},
build: {
outDir: mode === 'development' ? '.dev-dist' : 'dist',
emptyOutDir: true,
watch: mode === 'development' ? {
include: ['frontend/**', 'src/**'],
} : null,
worker: {
format: 'es',
},
sourcemap: true,
rollupOptions: {
input: {
client: './src/client.ts',
app: './frontend/index.tsx'
},
output: { entryFileNames: '[name].js', assetFileNames: "assets/[name].[ext]" }
},
},
resolve: {
dedupe: ['solid-js'],
}
}
))
@dario-piotrowicz let me know if you need anything more specific to help debug*
Hi @JonathanRiche, sorry I didn't see your earlier ping
Sorry I am not following your latest minimal reproduction, I tried running vite -c sample.vite.config.ts and that does not work:
Could you provide step-by-step instructions on how to run the minimal reproduction please? (what needs to be run in order, from where, etc...) 🙏
For that example you have to have wrangler running as well ie bunx wrangler dev(proxy error is b/c the 8787 port isn't up)
also this is the example of how i have it working in my production environment ie a separate spa frontend and hono backend, what i was trying to achieve is using the cf vite plugin to hydrate some routes but ran into the error mentioned initially
If I run wrangler dev separately I get undefined undefined (both in the wrangler dev server and in vite)
is this the expected behavior?
Yes i left that route up for the initial config to show the rendertostring not working (the normal way to server render solid just not working on cloudflare)
@JonathanRiche am I understanding correctly that your ask is that something like this: https://github.com/dario-piotrowicz/solidjs-render-cloudflare-vite-plugin-minimal-repro
Should produce valid server-side rendered html?
(
it currently produces undefined undefined and saves to the index.jsx file produce the following log:
)
Yes correct looking to have it server side render it and also hydrate components client side
Yes correct looking to have it server side render it and also hydrate components client side
Fanstatic! thanks 🙏 sorry it took me a while to get there! I think now we're clear on the issue, we'll look into it as soon as we have some capacity 👍