Issue with Vue/Nuxt 3: Unable to modify properties of null when setting 'textContent'

Question

Issue with Vue/Nuxt 3: Unable to modify properties of null when setting 'textContent'

I am currently facing an issue with a function that is designed to switch words every few seconds. The functionality itself is working fine, but I keep encountering the following error intermittently in the VSC console:

TypeError: Cannot set properties of null (setting 'textContent') at Timeout._onTimeout (.../components/home/Hero.vue:36:28) at listOnTimeout (node:internal/timers:564:17)

It's puzzling because when I console.log word.value, I can see that the element is being accessed successfully. This indicates that the function is indeed changing the words as intended, yet the error persists. I find this discrepancy confusing and am unsure how to troubleshoot it effectively. It's worth noting that the error only surfaces in the VSC console, not in Google Chrome's console.

<span ref="word"></span>

onMounted(() => {
  randomizeText()
  wordChanger
})

onBeforeRouteLeave(() => {
  clearTimeout(wordChanger)
})

const wordChanger = setInterval(randomizeText, 4000)

const word = ref(null)
const words = reactive(['Word-1', 'Word-2'])
let i = 0

function randomizeText() {
  i = randomNum(i, words.length)
  const newWord = words[i]

  setTimeout(() => {
    word.value.textContent = newWord
  }, 200) // time to allow opacity to hit 0 before changing word
}

function randomNum(num, max) {
  let j = Math.floor(Math.random() * max)

  // ensure diff num every time
  if (num === j) {
    return randomNum(i, max)
  } else {
    return j
  }
}

javascript vue.js nuxt.js vuejs3 nuxtjs3

Answer 1

Answer №1

Instead of utilizing const word = ref(null) as refs, you can directly reference it as the constant word within your template, and it will still function as expected.

<template>
  <div>
    <span>{{ word }}</span>
  </div>
</template>

When inside the setTimeout function, make sure to change word.value.textContent = newWord to word.value = newWord.

Here are the updated codes that have been tested and proven to work seamlessly.

<script setup lang="ts">
onMounted(() => {
  randomizeText()
  wordChanger
})

onBeforeRouteLeave(() => {
  clearTimeout(wordChanger)
})

const wordChanger = setInterval(randomizeText, 4000)

const word = ref('') // UPDATED
const words = reactive(['Word-1', 'Word-2'])
let i = 0

function randomizeText() {
  i = randomNum(i, words.length)
  const newWord = words[i]

  setTimeout(() => {
    word.value = newWord // UPDATED
  }, 200) // allowing opacity to reach 0 before changing word
}

function randomNum(num, max) {
  let j = Math.floor(Math.random() * max)

  // ensuring a different number each time
  if (num === j) {
    return randomNum(i, max)
  } else {
    return j
  }
}
</script>
<template>
  <div>
    <span>{{ word }}</span>
  </div>
</template>

I trust this explanation aids your understanding.

Answer 2

Instead of utilizing const word = ref(null) as refs, you can directly reference it as the constant word within your template, and it will still function as expected.

<template>
  <div>
    <span>{{ word }}</span>
  </div>
</template>

When inside the setTimeout function, make sure to change word.value.textContent = newWord to word.value = newWord.

Here are the updated codes that have been tested and proven to work seamlessly.

<script setup lang="ts">
onMounted(() => {
  randomizeText()
  wordChanger
})

onBeforeRouteLeave(() => {
  clearTimeout(wordChanger)
})

const wordChanger = setInterval(randomizeText, 4000)

const word = ref('') // UPDATED
const words = reactive(['Word-1', 'Word-2'])
let i = 0

function randomizeText() {
  i = randomNum(i, words.length)
  const newWord = words[i]

  setTimeout(() => {
    word.value = newWord // UPDATED
  }, 200) // allowing opacity to reach 0 before changing word
}

function randomNum(num, max) {
  let j = Math.floor(Math.random() * max)

  // ensuring a different number each time
  if (num === j) {
    return randomNum(i, max)
  } else {
    return j
  }
}
</script>
<template>
  <div>
    <span>{{ word }}</span>
  </div>
</template>

I trust this explanation aids your understanding.

Answer 3

Answer №2

It seems like the issue here is related to timing, where the element may not be fully mounted while it is being manipulated by the code.

An alternative approach to directly setting the textContent property is to utilize the v-html directive and update the referenced variable (ref) instead. Additionally, you can initialize the interval within the onMounted() hook.

import {onMounted, reactive, ref} from "vue";
import {onBeforeRouteLeave} from "vue-router";

let wordChanger;

onMounted(() => {
    randomizeText()
    wordChanger = setInterval(randomizeText, 4000);
})

onBeforeRouteLeave(() => {
    clearTimeout(wordChanger)
})

let word = ref('Hello')
const words = reactive(['Word-1', 'Word-2'])
let i = 0

function randomizeText() {
    i = randomNum(i, words.length)
    const newWord = words[i]

    setTimeout(() => {
        word.value = newWord
    }, 200) // time to allow opacity to hit 0 before changing word
}

function randomNum(num, max) {
    let j = Math.floor(Math.random() * max)

    // ensure different number every time
    if (num === j) {
        return randomNum(i, max)
    } else {
        return j
    }
}

<span v-html="word"></span>

Answer 4

It seems like the issue here is related to timing, where the element may not be fully mounted while it is being manipulated by the code.

An alternative approach to directly setting the textContent property is to utilize the v-html directive and update the referenced variable (ref) instead. Additionally, you can initialize the interval within the onMounted() hook.

import {onMounted, reactive, ref} from "vue";
import {onBeforeRouteLeave} from "vue-router";

let wordChanger;

onMounted(() => {
    randomizeText()
    wordChanger = setInterval(randomizeText, 4000);
})

onBeforeRouteLeave(() => {
    clearTimeout(wordChanger)
})

let word = ref('Hello')
const words = reactive(['Word-1', 'Word-2'])
let i = 0

function randomizeText() {
    i = randomNum(i, words.length)
    const newWord = words[i]

    setTimeout(() => {
        word.value = newWord
    }, 200) // time to allow opacity to hit 0 before changing word
}

function randomNum(num, max) {
    let j = Math.floor(Math.random() * max)

    // ensure different number every time
    if (num === j) {
        return randomNum(i, max)
    } else {
        return j
    }
}

<span v-html="word"></span>

Answer 5

Answer №3

You may be misusing the ref 'word' and here are some other details I have highlighted:- note: I have added comments to the lines that I have modified for better clarity

setup() {
    

    const word = ref(null);
    const words = reactive(['Word-1', 'Word-2']);

    function randomizeText(i) {
      const p = randomNum(i, words.length);
      const newWord = words[p];

      setTimeout(() => {
        word.value = newWord;
      }, 200); // giving time for opacity to reach 0 before changing word
    }

    function randomNum(num, max) {
      let j = Math.floor(Math.random() * max);

      // ensuring different number every time
      if (num === j) {
        // note that I have used num instead of i here as well
        return randomNum(num, max);
      } else {
        return j;
      }
    }
    
    const wordChanger = setInterval(randomizeText, 4000);
    
    onMounted(() => {
      randomizeText(0); // starting with 0
      // wordChanger; // no need to use this here
    });

    onBeforeRouteLeave(() => {
      clearTimeout(wordChanger);
    });

    return {
      word,
    };
  },

<span>{{ word }}</span>

Check out a demo here:- https://stackblitz.com/edit/vue-rap7bb?file=src/components/HelloWorld.vue

Answer 6

You may be misusing the ref 'word' and here are some other details I have highlighted:- note: I have added comments to the lines that I have modified for better clarity

setup() {
    

    const word = ref(null);
    const words = reactive(['Word-1', 'Word-2']);

    function randomizeText(i) {
      const p = randomNum(i, words.length);
      const newWord = words[p];

      setTimeout(() => {
        word.value = newWord;
      }, 200); // giving time for opacity to reach 0 before changing word
    }

    function randomNum(num, max) {
      let j = Math.floor(Math.random() * max);

      // ensuring different number every time
      if (num === j) {
        // note that I have used num instead of i here as well
        return randomNum(num, max);
      } else {
        return j;
      }
    }
    
    const wordChanger = setInterval(randomizeText, 4000);
    
    onMounted(() => {
      randomizeText(0); // starting with 0
      // wordChanger; // no need to use this here
    });

    onBeforeRouteLeave(() => {
      clearTimeout(wordChanger);
    });

    return {
      word,
    };
  },

<span>{{ word }}</span>

Check out a demo here:- https://stackblitz.com/edit/vue-rap7bb?file=src/components/HelloWorld.vue

Issue with Vue/Nuxt 3: Unable to modify properties of null when setting 'textContent'

Answer №1

Answer №2

Answer №3

Similar questions

Typescript: Determine when a property should be included depending on the value of another property

Is it normal for my sweelart2 to consistently be positioned behind my v-dialog component in Vuetify 3?

What is the best way to hide the jQuery modal I created?

Navigational packages for React applications

Issue with the statement not being recognized for counting the space bar

The issue of AngularJS directive failing to update controller variable

Utilizing Vuex data dynamically within a v-for loop

Developing JavaScript code for preventing blocking

Discover the nodes with the highest connections in a D3 Force Graph

Experiencing difficulties while attempting to organize an array?

Is there a way to retrieve the intersection point (Vector3) of the intersectObjects?

Utilize linear gradient effect in editing images and then convert them to base64 format using React

What is the best way to retrieve the value from a textbox on the client side and then utilize it to generate

Cease the use of jQuery animations

Limiting the zoom in three.js to prevent object distortion caused by the camera

Is there a Node template engine similar to EJS that seamlessly integrates with HTML templates?

String variable representing the name of a React element

The installation of plugins in Vue has hit a snag

Issues with Vue.js v-for functionality causing inconsistencies

Mastering NodeJS Promises: Efficiently Handling Multiple http.get Requests