Errors in template causing a recursion/infinite loop of Vue console warnings
Vue version
3.2.37
Link to minimal reproduction
https://github.com/benorudolf/issue-repro-vue-console-warn
Steps to reproduce
Setup
- Clone the repo
- Install dependencies via
npm install
- Run local dev server
npm run dev
(served onhttp://localhost:7777
)
Reproduce the issue
- Open the page in the browser; it should direct you to the
Page.vue
component route/page
. - Open the development console and make sure you have the Warnings log level checked (they're on by default).
- Open
Page.vue
in an editor. Create any sort of error inside the template e.g. change{{ name }}
to{{ nam }}
. - 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.
Can't reproduce the problem when following the instructions. I get exactly one console error&warning as would be expected.