Cloudflare v10 + Solid breaks some components and scripts

[MehrdadKhnzd]

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]

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

[MehrdadKhnzd]

Sorry, I fixed the permissions.

[alexanderniebuhr]

@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]

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

[alexanderniebuhr]

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

[MehrdadKhnzd]

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

[alexanderniebuhr]

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

[deeprobin]

@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]

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]

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

going back to 9.2.1 resolves the issue

[deeprobin]

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]

@alexanderniebuhr Do you have any update on this?

[alexanderniebuhr]

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]

@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]

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]

@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]

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

[alexanderniebuhr]

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

[deeprobin]

@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]

I think I found the upstream issue: solidjs/vite-plugin-solid#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