"this.load is not a function" when using Parcel for section plugin development

[hdodov]

Describe the bug
When you initially load the panel and your custom section within it - everything works. However, when you make a change in your section's source code and Parcel re-compiles it - HMR kicks in, replaces the section, and you get this error:

To Reproduce
Steps to reproduce the behavior:

1. Set up the pluginkit
2. Create a section as per the Kirby docs
3. npm run dev
4. Load the section plugin in the panel
5. Make a change in the source
6. See the error

Here's my section component:

<template>
  <section>
    <k-headline>{{ headline }}</k-headline>
  </section>
</template>

<script>
export default {
  data: () => {
    return {
      headline: null
    }
  },
  created () {
    this.load().then(response => {
      this.headline = response.headline
    })
  }
}
</script>

Expected behavior
Perhaps sections could receive the response as a prop, instead of having to load().then()? If response === null, the API call is in progress. If it's not null - it has returned.

Kirby Version
3.3.5

[bastianallgeier]

Parcel is no longer a viable option. We suggest the new kirbyup setup by @johannschopplich

[johannschopplich]

@hdodov https://github.com/johannschopplich/kirbyup#usage