Cloudflare v10 + Solid breaks some components and scripts

MehrdadKhnzd commented 6 months ago

Astro Info

Astro                    v4.5.16
Node                     v20.12.0
System                   Linux (x64)
Package Manager          bun
Output                   server
Adapter                  @astrojs/cloudflare
Integrations             unocss
                         @astrojs/solid-js
                         @swup/astro
                         @vite-pwa/astro-integration

Describe the Bug

When I deployed my web app using the new Cloudflare adapter, the functionality of many components and pages became broken.

For many components, it acts like I haven't added client:load at all - just rendering the component in a static form without having any functionality. Surprisingly, it worked for a few others. I'm still not sure about the exact situation causing it.

Also, it doesn't render the pages that have onMount in them. It just outputs blank.

What's the expected result?

All of them should work properly. In the minimal reproduction, you can see how using onMount makes the rendering blank. You can also comment onMount on the Btn.tsx component to see how it renders. I still don't have a concrete example of when the component becomes static and doesn't do anything, but I will add it here if I can.

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/MehrdadKhnzd/astro-bug-reproduction

Participation

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

alexanderniebuhr commented 5 months ago

@MehrdadKhnzd Thank you trying to reproduce everything, could you update the permissions on the repo, I can't open it.

MehrdadKhnzd commented 5 months ago

Sorry, I fixed the permissions.

alexanderniebuhr commented 5 months ago

@MehrdadKhnzd Please try @astrojs/cloudflare@0.0.0-cf-deps-chunk-20240406183753 and let me know if that fixes the client:load issue. It does not fix the onMount issue, but I wonder if it fixes the issue you have with some Solid components

MehrdadKhnzd commented 5 months ago

@alexanderniebuhr Now the build fails, both locally and on Cloudflare. Cannot access 'escape' before initialization

alexanderniebuhr commented 5 months ago

@MehrdadKhnzd sorry for that, the build was corrupted.. can you try @astrojs/cloudflare@0.0.0-cf-deps-chunk-20240407053056

MehrdadKhnzd commented 5 months ago

@alexanderniebuhr No, it didn't solve any of the problems.

alexanderniebuhr commented 5 months ago

Thank you for testing, for now I can only reproduce the onMount issue, we still need a reproduction for the other problems.

deeprobin commented 5 months ago

@alexanderniebuhr Now the build fails, both locally and on Cloudflare. Cannot access 'escape' before initialization

I had also this problem in my project.

Now with setting the version to 0.0.0-cf-deps-chunk-20240407053056, I get the following error:

> website@2.0.0 build E:\external\lindner\website
> astro build

18:15:35 [build] output: "server"
18:15:35 [build] directory: E:\external\lindner\website\dist\
18:15:35 [build] adapter: @astrojs/cloudflare
18:15:35 [build] Collecting build info...
18:15:35 [build] ✓ Completed in 340ms.
18:15:35 [build] Building server entrypoints...
18:15:48 [vite] ✓ built in 13.24s
18:15:48 [build] ✓ Completed in 13.32s.

 building client (vite) 
18:15:57 [vite] ✓ 1997 modules transformed.
18:15:57 [vite] dist/_astro/about-us.BNQU8f2g.css      0.39 kB │ gzip:  0.24 kB
18:15:57 [vite] dist/_astro/client.DRtjQ90i.js         0.86 kB │ gzip:  0.54 kB
18:15:57 [vite] dist/_astro/page.55INgWwS.js           2.24 kB │ gzip:  0.99 kB
18:15:57 [vite] dist/_astro/web.CSO6jSne.js           22.06 kB │ gzip:  8.64 kB
18:15:57 [vite] dist/_astro/ThemeToggle.CzAn_00l.js   22.39 kB │ gzip:  9.25 kB
18:15:57 [vite] dist/_astro/hoisted.CFb6nfp3.js      102.47 kB │ gzip: 33.89 kB
18:15:57 [vite] ✓ built in 9.23s
self is not defined
  Stack trace:
    at file:///E:/external/lindner/website/dist/_worker.js/chunks/vendor_eOrI-n3z.mjs:9635:38
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async BuildPipeline.retrieveManifest (file:///E:/external/lindner/website/node_modules/.pnpm/astro@4.6.0_sass@1.74.1_typescript@4.9.5/node_modules/astro/dist/core/build/pipeline.js:83:26)
    at async staticBuild (file:///E:/external/lindner/website/node_modules/.pnpm/astro@4.6.0_sass@1.74.1_typescript@4.9.5/node_modules/astro/dist/core/build/static-build.js:103:7)
    at async AstroBuilder.run (file:///E:/external/lindner/website/node_modules/.pnpm/astro@4.6.0_sass@1.74.1_typescript@4.9.5/node_modules/astro/dist/core/build/index.js:165:7)
    at async build (file:///E:/external/lindner/website/node_modules/.pnpm/astro@4.6.0_sass@1.74.1_typescript@4.9.5/node_modules/astro/dist/cli/build/index.js:20:3)
    at async cli (file:///E:/external/lindner/website/node_modules/.pnpm/astro@4.6.0_sass@1.74.1_typescript@4.9.5/node_modules/astro/dist/cli/index.js:169:5)
 ELIFECYCLE  Command failed with exit code 1.

Repro: https://github.com/lindner-development/website/tree/improvements

alexanderniebuhr commented 5 months ago

Thanks for adding context, we're trying to find a fix. This is probably also upstream caused, so we need to make sure we fix it at the right place.

rasco commented 5 months ago

not sure if this is related: https://github.com/withastro/adapters/issues/209#issuecomment-2051191907

going back to 9.2.1 resolves the issue

deeprobin commented 5 months ago

not sure if this is related: #209 (comment)

going back to 9.2.1 resolves the issue

Yeah that was my initial error, but that got solved using the next minor versions. Now I get this build time error.

deeprobin commented 5 months ago

@alexanderniebuhr Do you have any update on this?

alexanderniebuhr commented 5 months ago

We're still working on investigation, I also marked this issue as upstream, because we most likely need to fix it in core. However we're trying to find a workaround.

deeprobin commented 5 months ago

@alexanderniebuhr

Have there been any clues in the meantime as to how the problem could be fixed? I would really like to be able to use the integration again - I would only consider downgrading my site to v9 as a last resort.

We're still working on investigation, I also marked this issue as upstream, because we most likely need to fix it in core. However we're trying to find a workaround.

What seems to be the problem in the core?

alexanderniebuhr commented 5 months ago

There are some workarounds in all the related issues. I didn't find a solution to ship by default, but this is high priority.

The issue in core is that the generated code gets modified at the end, which leads to imports which don't exist after that modification.

alexanderniebuhr commented 4 months ago

@deeprobin @MehrdadKhnzd sorry that this is still not fixed, I'm taking another try at this. Can you please try this version: @astrojs/cloudflare@0.0.0-cf-deps-chunk-20240508124857

Does this fix all the issues you are seeing with Solid?

MehrdadKhnzd commented 4 months ago

@alexanderniebuhr Thanks for trying. None of the issues are resolved.

alexanderniebuhr commented 4 months ago

Strange, I can't reproduce them anymore, we keep trying

deeprobin commented 4 months ago

@alexanderniebuhr I tested the version also. Now I get no build errors anymore, but I can't test if everything works. It doesn't like the contentful integration, because it uses somewhere under the hood the eval function.

So first of all I need to find another headless CMS.

alexanderniebuhr commented 4 months ago

I think I found the upstream issue: https://github.com/solidjs/vite-plugin-solid/issues/153 This should be fixed in solid first, I would recommend trying to get someone on their discord to comment on it: https://publint.dev/solid-js@1.8.17

alexanderniebuhr commented 3 months ago

I don't expect this to be fixed by v11, but might be worth to try again.

MehrdadKhnzd commented 2 months ago

@alexanderniebuhr It's still not fixed, and the bigger problem is that even v8.1.0 no longer works. I made some structural changes in my app, and now when I use v8.1.0, which was the latest working version without breaking routes and Solid.js, it continues to create overlapping routes, preventing deployment on Cloudflare. I'm completely out of options and unable to deploy a new version. I hope you have a solution.

alexanderniebuhr commented 2 months ago

This is still an upstream bug, I haven't found a solution to make it work in general. There are some workarounds posted in all the issues here and in the upstream repository, maybe they might help you

MehrdadKhnzd commented 2 months ago

Among all the solutions, the only effective method that worked without side effects was patching Solid.js and removing the browser field from package.json in both the root package and all its sub-packages.

jasperteo commented 2 months ago

I guess our only hope for a fix can only be done from the Solid side. So far I am relying on the temporary workaround suggested in the upstream issue.

resolve: {
  conditions: ["worker", "webworker"],
  mainFields: ["module"],
}

withastro / adapters