Aashu-Dubey/capacitor-statusbar-safe-area

Error when using with Next.js: HTMLElement is not defined

natterstefan opened this issue · 3 comments

natterstefan commented

The same error reported here #10 for Nuxt happens in Next as well:

[0] ReferenceError: HTMLElement is not defined
[0]     at Object.<anonymous> (node_modules/@aashu-dubey/capacitor-statusbar-safe-area/dist/plugin.cjs.js:38:31)

Can you please help me, @Aashu-Dubey. :)

natterstefan commented

This is how I solved it:

export const CapacitorSafeArea = () => {
  useEffect(() => {
    async function inject() {
      const { SafeAreaController } = await import(
        '@aashu-dubey/capacitor-statusbar-safe-area'
      )
      SafeAreaController.injectCSSVariables()
    }

    inject()
  }, [])

  return null
}
Aashu-Dubey commented

Hey @natterstefan

A bit late, I didn't got much time to look into this, but you seem to have reported and quickly closed this with a solution, so just wanted to confirm, is this solution working fine for you?

For Nuxt, there was kind of an official way to approach this, but the main issue was accessing the plugin on the SSR, so as far as you access the plugin only on the client side, you should be good to go.

natterstefan commented

Hi @Aashu-Dubey,

no worries and thanks for getting in touch with me.

(...) just wanted to confirm, is this solution working fine for you?

yes, the solution above works for me.

Thanks for the fantastic work and 👋

  • 🎉1