Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite 4.1+ causes block.l is not a function error on HMR during dev #223

Open
smblee opened this issue Feb 23, 2023 · 9 comments
Open

Vite 4.1+ causes block.l is not a function error on HMR during dev #223

smblee opened this issue Feb 23, 2023 · 9 comments
Assignees
Labels
bug Something isn't working

Comments

@smblee
Copy link

smblee commented Feb 23, 2023

Describe the bug

Upgrading to vite 4.1+ from 4.0.4 causes HMR to not work with pages with ValidationMessage component with the error [HMR][Svelte] Unrecoverable HMR error in <Root>: next update will trigger a full reload and block.l is not a function and crashes.

Seems to be due to but i am not too sure:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'classList')

Currently i have to resolve to not upgrading vite to 4.1+

Which package/s are you using?

felte (Svelte)

Environment

  • OS: M1 Macbook Pro
  • Browser: Chrome
  • Version: felte@1.2.7, @felte/reporter-svelte@1.1.5, @felte/validator-zod@1.0.13

To reproduce

No response

Small reproduction example

No response

Screenshots

No response

Additional context

No response

@smblee smblee added the bug Something isn't working label Feb 23, 2023
@endigma
Copy link

endigma commented Mar 10, 2023

Can confirm, completely breaking

@fehnomenal
Copy link

We need the source of ValidationMessage.svelte exported.

Source: nolimits4web/swiper#4013

Adding "./ValidationMessage.svelte": "./src/ValidationMessage.svelte" to the package.json works.

@teenjuna
Copy link

+1

1 similar comment
@JLAcostaEC
Copy link

+1

@knakamura13
Copy link

knakamura13 commented Apr 14, 2023

Still broken.

I tried adding "./ValidationMessage.svelte": "./src/ValidationMessage.svelte" to the "exports" section of the file ./node_modules/@felte/reporter-svelte/package.json, but the error persists.

@TimoWilhelm
Copy link
Contributor

My current workaround is wrapping the <ValidationMessage> in <OnMount> blocks. It's definitely not optimal and I'd like to remove it in the future, but it allows me to continue working with HMR for now.

<OnMount>
  <ValidationMessage for="fruits" let:messages>
    ...
  </ValidationMessage>
</OnMount>

OnMount.svelte

<!-- Mounts a component when the DOM is ready. Useful for intro animations -->
<script>
  import { onMount } from 'svelte';

  let mounted = false;
  onMount(() => {
    mounted = true;
  });
</script>

{#if mounted}
  <slot />
{/if}

@gl-aagostino
Copy link

@TimoWilhelm Thank you for this!

@baseplate-admin
Copy link

Probably fixed by #237

Please check :)

@baseplate-admin
Copy link

@pablo-abc I think we can close this issue.

I been testing felte on a production site for months without any error on svelte 4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

10 participants