attachBanner is not a function

[ThomasKoscheck]

Hi,

I tried to implement the banner into my nuxt application. I followed you instructions from the Readme, but Nuxt gives me this error:

TypeError: attachBanner is not a function
    at VueComponent.mounted (CookieBanner.vue?33b7:10)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6494)
    at Vue._update (vue.runtime.esm.js?2b0e:3945)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)

My vue file

<template>
  <div ref="gdprBanner" />
</template>

<script>
export default {
  name: 'CookieBanner',
  mounted () {
    const { attachBanner } = require('@beyonk/gdpr-cookie-consent-banner/dist/esm/bundle.js')
    attachBanner(this.$refs.gdprBanner, {
      heading: 'Cookie policy'
    })
  }
}
</script>

Integration in default layout:

<template>
  <div>
    <div class="stretched clearfix">
      <AppHeader />
      <nuxt />
      <CookieBanner />
      <AppFooter />
    </div>
  </div>
</template>

<script>
import AppHeader from '../components/AppHeader'
import AppFooter from '../components/AppFooter'
import CookieBanner from '../components/elements/CookieBanner'

export default {
  components: {
    AppHeader, AppFooter, CookieBanner
  }
}
</script>

[antony]

Hi - I'll admit that I haven't used this without Svelte for a long time. It's possible that the attachBanner function was broken during the large refactor that happened recently.

I'll have a look and see if I can determine the cause.

[antony]

@ThomasKoscheck I've noticed this line in your code:

const { attachBanner } = require('@beyonk/gdpr-cookie-consent-banner/dist/esm/bundle.js')

I think in the readme, the attachBanner is not destructured as it is the default export.

Try:

const attachBanner = require('@beyonk/gdpr-cookie-consent-banner/dist/esm/bundle.js')

[ThomasKoscheck]

@antony Thanks, this worked for me