search

bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

<ToolTip/> throws HTMLElement is not defined #414

Closed lovasoa closed 2 years ago

lovasoa commented 2 years ago

Hello, It looks like since the latest update the <ToolTip/> element is broken and throws HTMLElement is not defined when server-side rendered.

Initially reported in https://github.com/lovasoa/sanipasse/issues/145

kaipaysen commented 2 years ago

Hi lovasoa,

this might be related to the Tooltip property target (which is not optional). I'll try to reproduce the issue on my side. You might want to try to pass an empty String as a target in the meantime.

Kai

lovasoa commented 2 years ago

No, it always throws an error, even if all properties are defined correctly. The component tries to reference objects that are not defined during server-side rendering.

kaipaysen commented 2 years ago

Acording to https://svelte.dev/blog/whats-new-in-svelte-september-2021 HTMLElement is supported starting from svelte 3.42.2. Sveltestrap uses 3.38.2. Would upgrading svelte solve the issue?

lovasoa commented 2 years ago

The changelog may be a little confusing. Svelte added HTMLElement as a known global during compilation so as not to trigger errors. But is doesn't actually define it, it expects it to be defined by the browser. In SvelteKit, components can be rendered on the server side, where HTMLElement is not defined.

You can reproduce this bug with the latest SvelteKit

kaipaysen commented 2 years ago

Some days ago I reproduced the issue with an older svelte kit application. Just some minutes ago I tried to reproduce the issue with an uptodate svelte kit application (sveltekit next227, svelte 3.46.1) and the issue has vanished. Would you mind doublechecking on your side?

lovasoa commented 2 years ago

Yes, I can confirm the bug is present with the latest sveltekit. The bug is going to be present as long as sveltestrap tries to reference undefined variables on the server side. The bug is in this repo, not in sveltekit. I was introduced in https://github.com/bestguy/sveltestrap/pull/396

lovasoa commented 2 years ago

Here is a simple reproduction you can paste into a default sveltekit project initialized with npm init svelte@next my-app

<script>
    import { Tooltip } from 'sveltestrap'
</script>

<Tooltip target='xxx'>bug</Tooltip>
<h1 id='xxx'>hello</h1>
bestguy commented 2 years ago

Thanks for the fix, will release this weekend.

bestguy commented 2 years ago

Released in: https://github.com/bestguy/sveltestrap/releases/tag/v5.8.0