TypeError: can't access property "h", this is undefined

[edemots]

Hi! I'm using Svelte 3.32.3 with Sapper 0.29.1 Typescript and got this error while trying to implement the error boundary.

My implementation is as simple as the one in the README see:

<script>
    import { Boundary } from 'lib/errorBoundary'
</script>

<Boundary onError={console.error}>
    <section>
        <p>data: {b.data}</p>
        <button
            on:click={() => {
                b = null
            }}>Trigger error</button
        >
    </section>
</Boundary>

Don't know if it's related to my current versions of Svelte and Sapper as it seems to work on the REPL.

Thank you for the help!

[rayaqin]

We have similar issues with the error boundary, with (same h is undefined error) "@crownframework/svelte-error-boundary": "1.0.3", "@tsconfig/svelte": "2.0.1", "svelte": "3.42.4", "svelte-check": "2.2.5", "svelte-loader": "3.1.2", "svelte-media-query": "1.1.2", "svelte-preprocess": "4.9.3",

[paulwag]

I encountered this error when moving multiple elements into the slot.

This works:

<Boundary onError="{console.error}">
    <OtherComponent />
</Boundary>

While this breaks with error: "Cannot read properties of undefined (reading 'h')"

<Boundary onError="{console.error}">
    <OtherComponent />
        <p>test</p>
</Boundary>

So my workaround so far is to bundle the needed elements into a single component which is then passed to the Boundary component. Hope this helps someone.

[legnaleurc]

I changed the guard function to pass down correct this and it works for me: https://github.com/CrownFramework/svelte-error-boundary/blob/main/src/createBoundary.js#L24

  function guard(fn, onError) {
    return function guarded(...args) {
      try {
        return fn.apply(this, args);
      } catch (err) {
        onError(err);
      }
    };
  }