search

solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://solidjs.com
MIT License
31.64k stars 887 forks source link

onCleanup is called on the server and it breaks the astro app #2123

Closed DrevaSergii closed 2 months ago

DrevaSergii commented 2 months ago

Describe the bug

I am developing my site using astro and solid. I want to subscribe to document clicks when the component is mounted and unsubscribe when the component is unmounted. Solid provides two functions to manage lifecycle - onMount and onCleanup. However, my app crashes when I put document in onCleanup. I observed that onCleanup is called when the app starts on the server, where there is no document.

Your Example Website or App

https://stackblitz.com/edit/github-eq5yjh?file=src%2Fcomponents%2FDemo.tsx,src%2Fpages%2Findex.astro

Steps to Reproduce the Bug or Issue

  1. Init astro program using hard.
  2. Add onCleanup to the component.
  3. Use the document somehow in the onCleanup callback.

Expected behavior

Since onMount isn't invoked on the server, I believe onCleanup shouldn't be invoked on the server either.

Screenshots or Videos

image

Platform

Astro - v4.5.16 Node - v18.19.0 System - macOS (arm64) Package Manager - pnpm Output - server Adapter - @astrojs/cloudflare Integrations - @astrojs/solid-js @astrojs/tailwind

Additional context

Discussion with Astro team: https://github.com/withastro/astro/issues/10710

I couldn't reproduce this issue with solid start https://playground.solidjs.com/anonymous/dac2d20e-5f9e-4bbc-be95-73ff967c88d2

ryansolid commented 2 months ago

onCleanup can call on the server because some things can be released/branch during server rendering. Like when hitting error boundaries and managing assets, HTTP headers etc. So this is by design.

If you don't want this to happen put the onCleanup inside the onMount that created the browser only thing you wanted to clean up.