Client Side Functionality not working properly in Cloudflare Adapter v10 while using Solidjs

[ksjitendra18]

Astro Info

Astro                    v4.9.2
Node                     v20.11.0
System                   Windows (x64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/tailwind
                         @astrojs/solid-js

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Functionality like onClick is not working. In network tab all the files loaded just perfectly fine. I have tried this in Chrome, Firefox, Brave latest version.

I have tried v10.0.3, 10.1.0, 10.2.6 Version: "@astrojs/cloudflare": "^10.2.6", "@astrojs/solid-js": "^4.2.0", "@astrojs/tailwind": "^5.1.0", "astro": "^4.9.2", "solid-js": "^1.8.17",

Repo: https://github.com/ksjitendra18/astro-solid-repo Live: https://astro-solid-repo.pages.dev/

On downgrading the version to v8 or v9 the functionality works completely fine

What's the expected result?

onClick to work and log to console which doesn't work in latest version

On downgrading to v8 or v9 it works. Repo: https://github.com/ksjitendra18/astro-solid-repo/tree/dev Live URL: https://c46d4cfd.astro-solid-repo.pages.dev/

Link to Minimal Reproducible Example

https://github.com/ksjitendra18/astro-solid-repo

Participation

• [ ] I am willing to submit a pull request for this issue.

[jasperteo]

This is an ongoing issue with the Vite Plugin for Solid.

https://github.com/solidjs/vite-plugin-solid/issues/153

One workaround is to change your astro.config.ts/astro.config.mjs right before the build step.

import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";
import solidJs from "@astrojs/solid-js";

// Example config
export default defineConfig({
  integrations: [solidJs()],
  output: "server",
  adapter: cloudflare({
    platformProxy: { enabled: true },
    imageService: "passthrough",
  }),
  vite: {
    // Temporary workaround
     resolve: {
       conditions: ["worker", "webworker"],
       mainFields: ["module"],
     },
  },
});

Your experience may vary as this is not a perfect solution.

[alexanderniebuhr]

Thanks, we're trying to work with the Solid team to resolve this. Duplicate of #224

[aurelius-coffee]

I had the same problem. In my case moving from <>...</> to <div>...</div> solved the issue. Maybe that can help you too @ksjitendra18

[ksjitendra18]

I had the same problem. In my case moving from <>...</> to <div>...</div> solved the issue. Maybe that can help you too @ksjitendra18

This does fix the issue. Thank you.