0

TLDR; I get an error when using a custom domain binding in Azure, but not when using the default azurewebsites binding. For example https://somewebsite.com do produce the error, while https://somewebsite.azurewebsites.net does not produce the error.

Background info:

In my application I am using Three.js to generate a background on my landing page. I’ve enclosed all the animation code within a component I call <Wave /> which I include in my index.vue. <Wave /> has only a div, in which I am trying to append a renderer – this works flawlessly in both production and development on my local computer, as well as in production on the default azurewebsites domain binding.

But then when accessing the same app service from a custom binding set up through CloudFlare, the component fails and I get the error saying DOMException: Node.appendChild: Cannot add children to a Text (This time using Firefox). This however only happens on a hard reload while accessing the custom binding, if I visit other links inside the app and move back to the route with the <Wave /> component, then it works perfectly.

General concept:

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

<script>
export default {
  data() {
    return {
      container: null,
    }
  },
  mounted() {
    this.init()
  },
    methods: {
    init() {
      this.container = this.$refs.animationContainer
      this.container.appendChild(someRenderer)
    },
}
</script>

Which produce the error only in a deployed production using the custom domain binding:

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (/_nuxt/0fdd5ad.js:2:41686)
    ...

I also did try to wrap the <Wave /> component in <ClientOnly>-tags, but this does not change the error in any way.

Any pointers on where to begin would be greatly appreciated.

Marius Mikelsen
  • 141
  • 2
  • 7
  • 1
    Your issue here is a lifecycle one and the fact that you're mainly try to access the ID of the DOM, which is not the recommended way of doing things. Prefer using [`refs`](https://vuejs.org/v2/api/#ref). This has nothing to do with the subdomain. More of the way your app is loading IMO. – kissu Sep 28 '21 at 08:03
  • 1
    I seem to have pasted my old code (Had this problem for a while now). I am currently using $refs to get the container, however I still get the same issue @kissu. – Marius Mikelsen Sep 28 '21 at 08:11

2 Answers2

1

You need to keep in mind that your code is executed on Server at first, as shown on this lifecycle: https://nuxtjs.org/docs/concepts/nuxt-lifecycle#nuxt-lifecycle

But I'm pretty sure that appendChild is not a method that works on the server. Since you're probably using ssr: true, I do recommend running this specific code only on the client-side, here is how to achieve this: https://stackoverflow.com/a/67751550/8816585

kissu
  • 40,416
  • 14
  • 65
  • 133
  • I forgot to mention it, but the component is already wrapped in -tags. This is why I am so baffeled with this issue. – Marius Mikelsen Sep 28 '21 at 09:03
  • 1
    @MariusMikelsen having the component in `` is not solving the issue that your code may still have an issue. Even if `mounted()` is only run on the client as shown here: https://nuxtjs.org/docs/concepts/nuxt-lifecycle#client You maybe have an issue, so try to use `process.client` still and see what happens. – kissu Sep 28 '21 at 10:18
  • adding `process.client` directly to a v-if gave me an error, but I tried adding v-if="isReady" and setting it to true in the mounted() hook, as well as false by default. There is however no change in the error, and still only on one of the bindings. – Marius Mikelsen Sep 28 '21 at 13:37
  • Also tried a variant like this: `mounted() { if(this.process.client) { this.isReady = true; } }` without any change in the error – Marius Mikelsen Sep 28 '21 at 14:16
  • What is `this.isReady`? @MariusMikelsen – kissu Sep 28 '21 at 16:27
  • isReady is a variable I set to false in data(), like I tried to explain (perhaps a bit poorly). I tried this since I couldn't use process.client directly in the html without producing an error. Therefore I checked for process.client in the mounted() hook and set the variable to true (thus showing the `` component only if the code runs clientside. The error I experience haven't changed, and is still only reproduced through a custom domain while the azurewebsites one work. @kissu – Marius Mikelsen Sep 29 '21 at 06:09
  • @MariusMikelsen please update your question with your updated code. – kissu Sep 29 '21 at 08:00
1

The problem originated from another part of the website, but affected the loading of the animation and made it look like it had something to do with it. I still have no clue what caused the error, but luckily don't experience this error any more.

Marius Mikelsen
  • 141
  • 2
  • 7