Summary: Encountering an error with custom domain binding in Azure, but not with default azurewebsites binding. For example results in an error, while does not trigger the error.
Background Information:
In my application, I am using Three.js to create a background on my landing page. The animation code is contained within a component named <Wave />, which is included in index.vue.
<Wave /> consists of only a div where I am trying to append a renderer – this works without issues in both production and development locally, as well as in production on the default azurewebsites domain binding.
However, when accessing the same app service through a custom binding set up via CloudFlare, the component fails and triggers an error stating
DOMException: Node.appendChild: Cannot add children to a Text<Wave /> component, it functions correctly.
General Idea:
<template>
<div ref="animationContainer"></div>
</template>
<script>
export default {
data() {
return {
container: null,
}
},
mounted() {
this.initialize()
},
methods: {
initialize() {
this.container = this.$refs.animationContainer
this.container.appendChild(someRenderer)
},
}
</script>
The mentioned error arises solely in a deployed production environment utilizing 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 attempted wrapping the <Wave /> component in <ClientOnly> tags, but this did not impact the error in any way.
Any guidance on how to address this issue would be highly appreciated.