Subscribe on changes!

Errors in template causing a recursion/infinite loop of Vue console warnings

avatar
Sep 4th 2022

Vue version

3.2.37

Link to minimal reproduction

https://github.com/benorudolf/issue-repro-vue-console-warn

Steps to reproduce

Setup

  1. Clone the repo
  2. Install dependencies via npm install
  3. Run local dev server npm run dev (served on http://localhost:7777)

Reproduce the issue

  1. Open the page in the browser; it should direct you to the Page.vue component route /page.
  2. Open the development console and make sure you have the Warnings log level checked (they're on by default).
  3. Open Page.vue in an editor. Create any sort of error inside the template e.g. change {{ name }} to {{ nam }}.
  4. Return to the browser.

If the replication was successful you should see console warnings being created infinitely and your browser tab freezing.

What is expected?

Only the original error should be printed.

What is actually happening?

The original error is printed followed by infinite Vue warnings. This freezes and eventually crashes the browser tab. Please see the provided reproduction repository README for additional details and findings.

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 4.15 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    npm: 8.5.3 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Brave Browser: 103.1.41.100
    Chrome: 90.0.4430.93
    Firefox: 93.0
    Safari: 15.0
  npmPackages:
    vue: ^3.2.37 => 3.2.38

Any additional comments?

I ran in to this bug in a larger project. It started happening when we switched from snowpack to Vite. I was able to successfully reproduce the issue in a minimal setup which is provided in the attached github repo.

It requires a very specific setup, though not uncommon I believe. There is a 3rd party widget involved and required to reproduce; though it's hard to say if it is the cause and not just a type of catalyst. The widget uses an API key that is under a 15-day trial period (will end on 19 Sep 2022).
There are more details and findings available in the reproduction repo readme.

I would like to apologize in advance if this is not the correct place to report this 🙏. Because it requires a specific setup it could have been reported in the issue reports of other dependencies e.g. Vue router or Vite. But because the warnings are coming from the Vue code I found it best to start here.

Even though the issue is leaning towards an edge case, my hope is that it could help uncover something more prominent.

avatar
Sep 17th 2022

Can't reproduce the problem when following the instructions. I get exactly one console error&warning as would be expected.

Bildschirmfoto 2022-09-17 um 13 35 59
avatar
Sep 26th 2022

closing for inactivity and missing reproduction