Build error using Astro JS and @astrojs/cloudflare

[felixlublasser]

I'm trying to use isomorphic-dompurify in our Astro JS project. When building the Astro JS pages (using Vite), I'm getting the following:

window is not defined
  Hint:
    Browser APIs are not available on the server.
    
    If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a `client:only` directive to make the component exclusively run on the client.
    
    See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.

Any chance you could take a look at this?

[kkomelin]

Thanks for reporting @felixlublasser . I've tried to reproduce the issue with the native Astro builder (not Vite) but couldn't. Can you share the Astro+Vite template which you used, so I could reproduce your environment?

[felixlublasser]

Hi! I think actually we're using the regular Astro builder as well, it's based on Vite. I just saw vite in the build ouput. Sorry, I didn't set up the project myself.
Maybe it's version specific? We're using Astro 5.5.4 and isomorphic-dompurify 2.26.0.

[felixlublasser]

I just figured out that I can use DOMPurify.sanitize fine on Astro pages, but it fails if I use it inside an Astro component that is used inside an Astro page.

[kkomelin]

@felixlublasser That's good to know. Thanks. It will help me reproduce

[kkomelin]

@felixlublasser I created a simple component like this:

---
import DOMPurify from 'isomorphic-dompurify';
---

<div id="container">
		{DOMPurify.sanitize(`<a onclick="javascript:alert('aaa')" href="https://astro.build">Hello</a>`)}
</div>

and included it into an Astro page like this:

<Test />

In result, the app prints <a href="https://astro.build">Hello</a>, which is a properly sanitized string. No error messages in the console.

---

If the problem still exists on your side, please provide a reproduction demo/repo.

[kkomelin]

Added playgrounds for different frameworks, you may use the frameworks/astro package to try to reproduce your issue https://github.com/kkomelin/isomorphic-dompurify-playgrounds

[felixlublasser]

I found that the issue is with our Astro Cloudflare adapter.

Starting from the Astro playground, adding the package @astrojs/cloudflare and changing the Astro config to the following is enough to make the build fail:

import cloudflare from "@astrojs/cloudflare"
import { defineConfig } from "astro/config"

export default defineConfig({
  adapter: cloudflare({}),
})

[kkomelin]

Thanks @felixlublasser for helping with investigation.

I've tried to enable cloudflare adapter in my playground and made the page "on-demand rendered" through export const prerender = false but couldn't reproduce the issue locally. it probably requires uploading production version to Cloudflare hosting, correct?

And I've updated the issue title to better match the environment.

[felixlublasser]

No no, I didn't upload anything to a production env. I simply made the changes I described in my comment above (install the package, add the adapter config), and ran npm run build. And that produces the error I mentioned in my very first comment.

[felixlublasser]

I made a fork of the playground and added the changes. Running npm run build fails here.

https://github.com/felixlublasser/isomorphic-dompurify-playgrounds-astro-cloudflare-issue

[kkomelin]

Here is a possible answer from the console on pnpm --filter astro build:

15:00:27 [WARN] [@astrojs/cloudflare] [@astrojs/cloudflare] This adapter is intended to be used with server rendered pages, which this project does not contain any of. As such, this adapter is unnecessary.

Which I fixed by adding export const prerender = false to the pages/index.astro page. Then it built successfully.

My fork/branch: https://github.com/kkomelin/isomorphic-dompurify-playgrounds/tree/astro-350

[felixlublasser]

Nice find! But that does mean I couldn't use this package on server generated pages using the Cloudflare adapter.
We're using SSG on some pages, and SSR on others.

[felixlublasser]

With some more fiddling around, I can confirm it's working unless I try and use it on a SSG page (or a component/layout that is used on one). It would be amazing if that worked though! I have some components where I would like to use isomorphic-dompurify on that are embedded on both SSG and SSR pages. Having two copies of those floating around is impractical.

[kkomelin]

Thanks @felixlublasser . I'll see what I can do here but there is a chance that it's an @astrojs/cloudflare issue.