'Next.js destroy is not a function when navigating to different page

So basically every time a navigate to a different page in this case from home page to /blog using next-link I get Unhandled Runtime Error TypeError: destroy is not a function but when I refresh the page the page loads correctly or if I type in the URL manually in the browser for instance localhost:3000/blog here is a screenshots of the error

and here is the code for the blog page


///blog page
export default function Blog(props) {

  const { posts, tags } = props;

  function switchMode() {
    props.setMode(props.mode === 'light' ? 'dark' : 'light');
  }
  return (
    <>
      <Head>

        <title>Blog</title>
        <link rel="icon" href="/favicon.ico" />
        <meta name="description" content="Yushae Raza's personal blog" />
      </Head>



      <main style={{ paddingTop: "5em" }}>
        <Container>
          <Typography variant="h1" align="center" >
            Blog
          </Typography>
          <Divider />
          <br></br>
          <Grid container spacing={2}>



            <Grid item xs={12} md={8}>

              {posts.map((post, idx) => (<>



                <Post
                  title={post.title}
                  publishedAt={post.published_at}
                  author={post.authors[0].name}

                  imageUrl={post.feature_image}
                  description={post.excerpt}
                  category={post.tags[0].name}
                  slug={post.slug} /><br></br>

              </>)
              )}
            </Grid>
            <Grid item xs={12} md={4}>
              <Sidebar tags={tags} />
            </Grid>



          </Grid>
        </Container>
      </main>

    </>

  )
}
export async function getStaticProps() {
  // get posts from our api
  const { posts } = await api.getPosts(0);
  const { tags } = await api.getTags();
  //  console.log(posts)




  return {
    props: { posts, tags },
    revalidate: 10
  };
}

//navbar
const pages = [
    { name: 'Blog', link: '/blog' },

  ]

              {pages.map((page, idx) => (
                <MenuItem key={idx} onClick={handleCloseNavMenu}
                  sx={{ flexGrow: 1 }}>
                  <Link href={page.link}>

                    {page.name}

                  </Link>
                </MenuItem>
              ))}

//api.js


const backendUrl = 'https://yr-blog.herokuapp.com/'



export const getPosts = (page) => {

    console.log(process.env.API_KEY)
    return fetch(
        `${backendUrl}ghost/api/v4/content/posts/?key=${process.env.API_KEY}&order=published_at%20desc&include=authors,tags&page=${page}&fields=title,slug,feature_image,published_at,excerpt&formats=plaintext`
    ).then((res) => res.json())



}
export const getSlugs = (page) => {

    console.log(process.env.API_KEY)
    return fetch(
        `${backendUrl}ghost/api/v4/content/posts/?key=${process.env.API_KEY}&order=published_at%20desc&fields=slug`
    ).then((res) => res.json())


}
export const getTags = () => {
    return fetch(
        `${backendUrl}ghost/api/v4/content/tags/?key=${process.env.API_KEY}&fields=name,slug`
    ).then((res) => res.json())

}
export const getTagsSlugs = () => {
    return fetch(
        `${backendUrl}ghost/api/v4/content/tags/?key=${process.env.API_KEY}&fields=slug`
    ).then((res) => res.json())

}
export const getTagName = (slug) => {
    return fetch(`${backendUrl}ghost/api/v4/content/tags/?key=${process.env.API_KEY}&filter=slug:${slug}&fields=name`).then((res) => res.json());
}
export const getPost = (slug) => {
    return fetch(`${backendUrl}ghost/api/v4/content/posts/?key=${process.env.API_KEY}&filter=slug:${slug}&order=published_at%20desc&include=authors,tags&fields=html,title,slug,feature_image,published_at`).then((res) => res.json())
}
export const getPostsByTag = (tag, page) => {
    return fetch(`${backendUrl}ghost/api/v4/content/posts/?key=${process.env.API_KEY}&filter=tags:${tag}&order=published_at%20desc&include=authors,tags&page=${page}&fields=title,slug,feature_image,published_at,excerpt&formats=plaintext`).then((res) => res.json())
}

//home page 
export default function Home(props) {
  useEffect(() => {

    TagCloud(".test", [
      'JavaScript', 'CSS', 'HTML',
      'C', 'C++', 'React',
      'Python', 'Java', 'git',
      'django', 'Node.js', 'Express.js',
      'MySQL', 'jQuery',
      'Bootstrap', 'Material-UI',
      'Next.js', 'React-Native',
      'Firebase', 'Apache',
      'MongoDB', 'SQL',
      'TypeScript', 'Git',
    ], {
      radius: screen.width > 500 ? 300 : 100,
      // slow, normal, fast
      maxSpeed: 'fast',
      initSpeed: 'fast',

      // 0 = top
      // 90 = left
      // 135 = right-bottom
      direction: 135,

      keep: false,


    });
    return () => {
      let tagClouds = document.getElementsByClassName('tagcloud');
      for (let i = 0; i < tagClouds.length; i++) {
        tagClouds[0].remove();

      }
    };

  }, []);

Update 1 I narrowed down the issue to the animateletters component which detailed below

const AnimatedLetters = (props) => {
  const [letterClass, setLetterClass] = useState('letter-intro');
  useEffect(() => {
      return setTimeout(() => {
          setLetterClass('letter-hover');
      }, 4000)
  }, []);
  const letters = props.title.split("");
  const length = letters.length;
  return (
      <StyledSpan length={length} useDefaultColor={props.useDefaultColor}>
          {letters ? letters.map((char, index) => {

              return (
                  <span className={`letter ${letterClass} _${index}`} key={index}>{char}</span>
              );
          }) : null}

      </StyledSpan>

  )
}
export default AnimatedLetters;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Next.js destroy is not a function when navigating to different page

Sources

Related Questions