Error when using with Nuxt.js

[gerritvanaaken]

When using within my Nuxt.js environment, I am getting an error message on npm run dev.

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

When I remove "SafeAreaElement" from the plugin code, all is working well.(I do not need SafeSreaElement, only "getSafeAreaInsets"), so I could do a fork, but maybe you can have look into it.

Maybe it has something to do with TypeScript (or the lack of it?)

[Aashu-Dubey]

Hi, I created a dummy Nuxt.js project with Capacitor and was able to reproduce this.

I'm not really sure about this behaviour in Nuxt to be honest, I could only find some issues with them suggesting this solution to bypass the error.

I've pushed some potential fix in the branch fix/HTMLElement_nuxtjs_10, it would be great if you can give it a try and confirm if it fixes the issue for you, though I already tested in the dummy app mentioned above and it's working fine for me.

Thanks!

[gerritvanaaken]

Still no luck. I downloaded your fixed branch, did npm i and npm run build, the result was still an error 500 on npm run dev in my Nuxt project. See attached Nuxt error as screenshot:

[Aashu-Dubey]

How are you using/installing the branch changes? please make sure the commit changes are present there, or maybe paste them manually in the node_modules to test?

When I tried this locally, it at least was working fine as long as I was not importing the registerSafeAreaElement function, means only importing SafeArea caused no error.

[gerritvanaaken]

As I said, I downloaded a ZIP of the branch with the changes (There were there!), did npm i and npm run build, and the resulting plugin.cjs.js still threw an error. I only import SafeAre, not SafeAreaElement.

Maybe it’s my overly strictly configured TypeScript setup?

[Aashu-Dubey]

I'm not really sure about the npm i part cause, this will then override node_modules with latest package version's changes, which will contain the branch changes.

I don't think typescript is the issue here, I was able to reproduce this in a initial NuxtJs project too, but got it working after the changes.

Do you have any idea why this behave this way in Nuxt, maybe cause of SSR, because of which window APIs are not available till complete rendering?

To test I would suggest you to just take commit changes and paste them directly to node_modules/@aashu-dubey/capacitor-statusbar-safe-area in relevant files, without running npm i.
or
as you said you downloaded zip, you can switch branch -> install the local package code following this guide
it would show up like this

---

To give you can idea what I'm testing

Have also tested on iOS by the way
(you can see insets printed at the top)

[gerritvanaaken]

I think I did everything correctly to have Nuxt use the new branch. See my terminal output from npm run dev below. Note that the line number of the error make sense for the new version, it is different from the "original" error line number. (When I use npx nuxi generate for my static output, the problem never occurred.)

I attach the dist folder that I generated with your new branch, maybe this helps:
dist.zip

[nuxt] [request error] [unhandled] [500] HTMLElement is not defined                                                            22:24:26
  at Object.<anonymous> (./node_modules/@aashu-dubey/capacitor-statusbar-safe-area/dist/plugin.cjs.js:60:31)  
  at Module._compile (node:internal/modules/cjs/loader:1255:14)  
  at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)  
  at Module.load (node:internal/modules/cjs/loader:1113:32)  
  at Module._load (node:internal/modules/cjs/loader:960:12)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)  
  at ModuleJob.run (node:internal/modules/esm/module_job:192:25)                                                               22:24:21
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[nuxt] [request error] [unhandled] [500] HTMLElement is not defined                                                            22:24:26
  at Object.<anonymous> (./node_modules/@aashu-dubey/capacitor-statusbar-safe-area/dist/plugin.cjs.js:60:31)  
  at Module._compile (node:internal/modules/cjs/loader:1255:14)  
  at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)  
  at Module.load (node:internal/modules/cjs/loader:1113:32)  
  at Module._load (node:internal/modules/cjs/loader:960:12)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)  
  at ModuleJob.run (node:internal/modules/esm/module_job:192:25)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[nuxt] [request error] [unhandled] [500] HTMLElement is not defined                                                            22:24:26
  at Object.<anonymous> (./node_modules/@aashu-dubey/capacitor-statusbar-safe-area/dist/plugin.cjs.js:60:31)  
  at Module._compile (node:internal/modules/cjs/loader:1255:14)  
  at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)  
  at Module.load (node:internal/modules/cjs/loader:1113:32)  
  at Module._load (node:internal/modules/cjs/loader:960:12)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)  
  at ModuleJob.run (node:internal/modules/esm/module_job:192:25)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[Aashu-Dubey]

I've temporarily pushed the dummy project that I was trying to test this issue here, can you please have a look and let me know if I'm testing properly here.

for package version update the package.json and copy the dist at the node_modules

For me the new branch changes are working fine in this project.

Regarding the issue I believe it's SSR related maybe, as browser APIs are not available on the server, see this blog for reference

[Aashu-Dubey]

Hi @gerritvanaaken

The main reason you're getting this error is because of SSR, the browser APIs like HTMLElement are not available on the server, so to use this plugin and the functionalities within in your Nuxt.js app, you need to follow these steps:

1. Create a new file safeArea.client.ts (name as you wish) inside the plugins folder at the root.
   we're suffixing with .client because we don't need this plugin on server side.
   Now add below code inside the file

import * as SafeArea from "@aashu-dubey/capacitor-statusbar-safe-area";

export default defineNuxtPlugin(() => {
  return {
    provide: {
      CapSafeArea: SafeArea,
    },
  };
});

2. Now you can access the plugin anywhere in your Nuxt app like this:

<template>
  <div>
    Your Nuxt App
  </div>
</template>

<script setup lang="ts">
const { $CapSafeArea } = useNuxtApp();

const insets = await $CapSafeArea?.SafeArea?.getSafeAreaInsets();
console.log("getSafeAreaInsets", insets);

// $CapSafeArea?.registerSafeAreaElement();
</script>

And that's it, it should work fine after this, you don't even need the new branch I created.
(Feel free to tweak the names and other stuff to whatever works best for you, I just provided a minimal example)

Check out this dummy app (will delete in a while) for a working example, and this commit for the changes required, it even is working fine with web component (safe-area) also now (the one that was causing you error).

I'm not sure how you're using the plugin, but doing above steps hopefully should fix the issue for you, as I have tested it now on Web as well as on Mobile.

---

There's an official Capacitor blog regarding using Capacitor Plugins in a Nuxt app with SSR, avoiding any SSR related errors (like in your case).
It's an old blog that uses inject to make the plugin available globally, but that's deprecated now so the above steps are using the new approach according to the current Nuxt documentation

[Aashu-Dubey]

Would really appreciate if you can try this and update if it fixes the issue for you, will also add a Nuxt.js example and details on Readme once you confirm.

[gerritvanaaken]

You are unbelievable, thank you for all your work. Unfortunately I‘m on vacation right now. Hope I can check your plugin solution very soon!

[Aashu-Dubey]

Alright, no issue, enjoy your vacation 🏖️

But make sure to update once you're back 😄

[gerritvanaaken]

Very good! Including your project as proper Nuxt plugin within the plugins folder works smoothly and without errors now. I tried npm run dev and npx nuxi generate in SSR mode. All fine, thank you so much!

[Aashu-Dubey]

Thanks for the update, now since we know it's not an issue, I'm gonna close this.

Will also update the README with this detail.