Vue Application : Footer doesn't render and give my 2 errors and warning-CodePudding

I am kind of revising and trying VUE 3 I created a Task Tracker application. The problem is when I try to add a footer, it does not work and give me the following problems :

Also, it worth mention that I tried to add Vue-router before adding the Footer. So I removed Vue-router settings and files but still the same error and warning

Error : Uncaught (in promise) RangeError: Maximum call stack size exceeded


Warning : runtime-core.esm-bundler.js?5c40:6568 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <Footer> 
  at <Footer> 
  at <Footer> 
  at <Footer> 
  at <Footer> 
and so on for a long line 


Error: Uncaught (in promise) RangeError: Maximum call stack size exceeded

and here is my full code repo : https://github.com/Ahmed-Elbessfy/vue-task-tracker-issue

CodePudding user response：

You are calling the Footer component inside the Footer component:

src/components/Footer.vue

<template>
  <Footer>
...

use the built-in HTML <footer> element instead (lower case f)

CodePudding user response：

As @tauzN points, you're creating an infinite loop by calling the component Footer inside Footer.

You should use a multi-word name approach for your components:

This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.