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

"Sequencing time with Postgres, manipulating views with Angular

Transferring Variables from WordPress PHP to JavaScript

Is it better to define a function within useEffect or externally?

Service in AngularJS designed specifically for storing and managing SEO metadata

"Although Vuex data is present, an error is being logged in the JavaScript console

Promise.all does not wait for the inner Promise.all to complete before continuing

Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

Is there a simple solution to show script 1 to visitors from the US and Canada, while displaying script 2 to visitors from other countries?

I am confused about the process of mounting components

Does this information operate on Vue or Node?

Identifying and handling the removal of a complete div element by the user

No files found in dist/ directory when using Vue.js

JavaScript events for scrolling horizontally and vertically across multiple browsers

"Encountering a 'Cannot GET' error message while utilizing Rest API in Node.js

I am looking to modify the background color of characters in a text box once the characters in a textarea exceed 150 characters

Tips for updating the content within an HTML tag with jQuery

Observables waiting inside one another

Unlocking the Power of Global Props in AlpineJS: A Step-by-Step Guide

The module './installers/setupEvents' could not be located within Electron-Winstaller

The access to the HTTP response object is not possible: the property is not found on the Object type