Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maximum call stack size exceeded in Vue warn #8074

Closed
Maxim-Mazurok opened this issue Apr 13, 2023 · 7 comments
Closed

Maximum call stack size exceeded in Vue warn #8074

Maxim-Mazurok opened this issue Apr 13, 2023 · 7 comments
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.

Comments

@Maxim-Mazurok
Copy link

Maxim-Mazurok commented Apr 13, 2023

Vue version

3.2.47

Link to minimal reproduction

https://github.com/Maxim-Mazurok/vue-8074-repro

Steps to reproduce

Basically I'm trying to test Vuetify VSelect component in Vitest and I don't have window.ResizeObserver in jsdom.
This results in Error from watcher:
[Vue warn]: Unhandled error during execution of watcher callback
After that, in node_modules/@vue/runtime-core/dist/runtime-core.cjs.js is enters an infinite loop:
in function warn it takes trace which includes Ref/Proxy, and when trying to console.warn() it - it triggers Avoid app logic that relies on enumerating keys on a component instance warning which then has the same trace, which triggers Avoid app logic that relies on enumerating keys on a component instance which has the same trace, and so on, loop.

What is expected?

No loop.

What is actually happening?

Loop :)

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Memory: 26.01 GB / 31.19 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

Sorry for a bit rushed report, hopefully it's enough detail, I'm trying to debug it now.

@Maxim-Mazurok
Copy link
Author

Here's a patch that solves the issue for me:

diff --git a/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js b/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js
index 8442995..ca1c078 100644
--- a/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js
+++ b/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js
@@ -12,6 +12,7 @@ function pushWarningContext(vnode) {
 function popWarningContext() {
     stack.pop();
 }
+var lastWarnArgsString;
 function warn(msg, ...args) {
     // avoid props formatting or warn handler tracking deps that might be mutated
     // during patch, leading to infinite recursion.
@@ -37,7 +38,11 @@ function warn(msg, ...args) {
             !false) {
             warnArgs.push(`\n`, ...formatTrace(trace));
         }
-        console.warn(...warnArgs);
+        const warnArgsString = warnArgs.map(x => x.toString()).join(';');
+        lastWarnArgsString = warnArgsString;
+        if (lastWarnArgsString !== warnArgsString) {
+          console.warn(...warnArgs);
+        }
     }
     reactivity.resetTracking();
 }

Here's output before:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 5 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should display an input for URL, when 'Update Type' is 1
TestingLibraryElementError: Unable to find a label with the text of: URL

Ignored nodes: comments, script, style
<body>
  <div>
        ...
                  <div
                    class="...
 ❯ Object.getElementError node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ getAllByLabelText node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/queries/label-text.js:103:38
 ❯ node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ src/components/__tests__/DialogContentDailyUpdateBase.spec.ts:53:29
     51| 
     52|     // Assert
     53|     const urlInput = screen.getByLabelText<HTMLInputElement>("URL"…
       |                             ^
     54|     expect(updateTypeSelectElement.value).toBe(updateTypeValue);
     55|     expect(urlInput).not.toBeNull();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/5]⎯

 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should display an input for URL, when 'Update Type' is 3
 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should display an input for URL, when 'Update Type' is 4
TestingLibraryElementError: Unable to find a label with the text of: URL

Ignored nodes: comments, script, style
<body>
  <div
    class="v-overlay-container"
  >
      ...
            </...
 ❯ Object.getElementError node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ getAllByLabelText node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/queries/label-text.js:103:38
 ❯ node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ src/components/__tests__/DialogContentDailyUpdateBase.spec.ts:53:29
     51| 
     52|     // Assert
     53|     const urlInput = screen.getByLabelText<HTMLInputElement>("URL"…
       |                             ^
     54|     expect(updateTypeSelectElement.value).toBe(updateTypeValue);
     55|     expect(urlInput).not.toBeNull();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/5]⎯

 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should set the URL to empty when 'Update Type' is changed to something other than 'External Link'
 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should not change the URL when 'Update Type' is changed to 'External Link'
TestingLibraryElementError: Value "3" not found in options

Ignored nodes: comments, script, style
<input
  aria-describedby="input-8-messages"
  id="input-8"
  name="update-type"
  readonly=""
  required=""
  size="1"
  tag="select"
  type="text"
/>
 ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/@testing-library/user-event/dist/esm/utility/selectOptions.js:44:35
 ❯ Object.selectOptionsBase node_modules/@testing-library/user-event/dist/esm/utility/selectOptions.js:36:38
 ❯ Object.selectOptions node_modules/@testing-library/user-event/dist/esm/utility/selectOptions.js:23:30
 ❯ node_modules/@testing-library/user-event/dist/esm/setup/setup.js:84:35
 ❯ Object.asyncWrapper node_modules/@testing-library/dom/dist/config.js:23:23
 ❯ wrapAsync node_modules/@testing-library/user-event/dist/esm/setup/wrapAsync.js:6:24
 ❯ Object.method [as selectOptions] node_modules/@testing-library/user-event/dist/esm/setup/setup.js:84:16
 ❯ Object.selectOptions node_modules/@testing-library/user-event/dist/esm/setup/directApi.js:36:37

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/5]⎯

 Test Files  1 failed (1)
      Tests  5 failed (5)
   Start at  15:20:44
   Duration  3.59s (transform 1.23s, setup 91ms, collect 1.68s, tests 700ms)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 6 unhandled errors during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
RangeError: Maximum call stack size exceeded
 ❯ warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:15:14
 ❯ Object.PublicInstanceProxyHandlers.ownKeys node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3257:9
 ❯ getKeys node:internal/util/inspect:711:19
 ❯ formatRaw node:internal/util/inspect:947:12
 ❯ formatValue node:internal/util/inspect:841:10
 ❯ inspect node:internal/util/inspect:365:10
 ❯ formatWithOptionsInternal node:internal/util/inspect:2273:40
 ❯ Object.format node:internal/util/inspect:2130:10
 ❯ Console.captureMessage node_modules/jest-fail-on-console/index.js:48:28

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
RangeError: Maximum call stack size exceeded
 ❯ classify node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7414:31
 ❯ formatComponentName node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7442:19
 ❯ formatTraceEntry node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:82:26
 ❯ node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:75:50
 ❯ formatTrace node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:74:11
 ❯ warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39:36
 ❯ Object.PublicInstanceProxyHandlers.ownKeys node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3257:9

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
RangeError: Maximum call stack size exceeded
 ❯ classify node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7414:31
 ❯ formatComponentName node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7442:19
 ❯ formatTraceEntry node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:82:26
 ❯ node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:75:50
 ❯ formatTrace node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:74:11
 ❯ warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39:36
 ❯ Object.PublicInstanceProxyHandlers.ownKeys node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3257:9

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
RangeError: Maximum call stack size exceeded
 ❯ classify node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7414:31
 ❯ formatComponentName node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7442:19
 ❯ formatTraceEntry node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:82:26
 ❯ node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:75:50
 ❯ formatTrace node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:74:11
 ❯ warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39:36
 ❯ Object.PublicInstanceProxyHandlers.ownKeys node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3257:9

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
RangeError: Maximum call stack size exceeded
 ❯ classify node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7414:31
 ❯ formatComponentName node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7442:19
 ❯ formatTraceEntry node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:82:26
 ❯ node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:75:50
 ❯ formatTrace node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:74:11
 ❯ warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39:36
 ❯ Object.PublicInstanceProxyHandlers.ownKeys node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3257:9

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
RangeError: Maximum call stack size exceeded
 ❯ classify node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7414:31
 ❯ formatComponentName node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7442:19
 ❯ formatTraceEntry node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:82:26
 ❯ node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:75:50
 ❯ formatTrace node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:74:11
 ❯ warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39:36
 ❯ Object.PublicInstanceProxyHandlers.ownKeys node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3257:9

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Here's output after:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 5 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should display an input for URL, when 'Update Type' is 1
TestingLibraryElementError: Unable to find a label with the text of: URL

Ignored nodes: comments, script, style
<body>
  <div>
          ...
                  <div
                    class="...
 ❯ Object.getElementError node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ getAllByLabelText node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/queries/label-text.js:103:38
 ❯ node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ src/components/__tests__/DialogContentDailyUpdateBase.spec.ts:53:29
     51|
     52|     // Assert
     53|     const urlInput = screen.getByLabelText<HTMLInputElement>("URL"…
       |                             ^
     54|     expect(updateTypeSelectElement.value).toBe(updateTypeValue);
     55|     expect(urlInput).not.toBeNull();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/5]⎯

 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should display an input for URL, when 'Update Type' is 3
 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should display an input for URL, when 'Update Type' is 4
TestingLibraryElementError: Unable to find a label with the text of: URL

Ignored nodes: comments, script, style
<body>
  <div
    class="v-overlay-container"
  >
      ...
            </...
 ❯ Object.getElementError node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ getAllByLabelText node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/queries/label-text.js:103:38
 ❯ node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ node_modules/@testing-library/vue/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ src/components/__tests__/DialogContentDailyUpdateBase.spec.ts:53:29
     51|
     52|     // Assert
     53|     const urlInput = screen.getByLabelText<HTMLInputElement>("URL"…
       |                             ^
     54|     expect(updateTypeSelectElement.value).toBe(updateTypeValue);
     55|     expect(urlInput).not.toBeNull();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/5]⎯

 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should set the URL to empty when 'Update Type' is changed to something other than 'External Link'
 FAIL  src/components/__tests__/DialogContentDailyUpdateBase.spec.ts > Should not change the URL when 'Update Type' is changed to 'External Link'
TestingLibraryElementError: Value "3" not found in options

Ignored nodes: comments, script, style
<input
  aria-describedby="input-8-messages"
  id="input-8"
  name="update-type"
  readonly=""
  required=""
  size="1"
  tag="select"
  type="text"
/>
 ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/@testing-library/user-event/dist/esm/utility/selectOptions.js:44:35
 ❯ Object.selectOptionsBase node_modules/@testing-library/user-event/dist/esm/utility/selectOptions.js:36:38
 ❯ Object.selectOptions node_modules/@testing-library/user-event/dist/esm/utility/selectOptions.js:23:30
 ❯ node_modules/@testing-library/user-event/dist/esm/setup/setup.js:84:35
 ❯ Object.asyncWrapper node_modules/@testing-library/dom/dist/config.js:23:23
 ❯ wrapAsync node_modules/@testing-library/user-event/dist/esm/setup/wrapAsync.js:6:24
 ❯ Object.method [as selectOptions] node_modules/@testing-library/user-event/dist/esm/setup/setup.js:84:16
 ❯ Object.selectOptions node_modules/@testing-library/user-event/dist/esm/setup/directApi.js:36:37

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/5]⎯

 Test Files  1 failed (1)
      Tests  5 failed (5)
   Start at  15:18:05
   Duration  4.43s (transform 1.83s, setup 102ms, collect 1.92s, tests 604ms)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 6 unhandled errors during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: ResizeObserver is not defined
 ❯ Object.connectedLocationStrategy [as connected] node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:205:9
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:97:72
 ❯ EffectScope.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:41:24
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:91:14
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:176:22
 ❯ callWithAsyncErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:185:21
 ❯ ReactiveEffect.getter [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1746:24
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25
 ❯ job node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1823:20
 ❯ flushPreFlushCbs node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:335:13

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: ResizeObserver is not defined
 ❯ Object.connectedLocationStrategy [as connected] node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:205:9
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:97:72
 ❯ EffectScope.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:41:24
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:91:14
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:176:22
 ❯ callWithAsyncErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:185:21
 ❯ ReactiveEffect.getter [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1746:24
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25
 ❯ job node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1823:20
 ❯ flushPreFlushCbs node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:335:13

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: ResizeObserver is not defined
 ❯ Object.connectedLocationStrategy [as connected] node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:205:9
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:97:72
 ❯ EffectScope.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:41:24
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:91:14
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:176:22
 ❯ callWithAsyncErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:185:21
 ❯ ReactiveEffect.getter [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1746:24
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25
 ❯ job node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1823:20
 ❯ flushPreFlushCbs node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:335:13

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: ResizeObserver is not defined
 ❯ Object.connectedLocationStrategy [as connected] node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:205:9
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:97:72
 ❯ EffectScope.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:41:24
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:91:14
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:176:22
 ❯ callWithAsyncErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:185:21
 ❯ ReactiveEffect.getter [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1746:24
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25
 ❯ job node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1823:20
 ❯ flushPreFlushCbs node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:335:13

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: ResizeObserver is not defined
 ❯ Object.connectedLocationStrategy [as connected] node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:205:9
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:97:72
 ❯ EffectScope.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:41:24
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:91:14
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:176:22
 ❯ callWithAsyncErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:185:21
 ❯ ReactiveEffect.getter [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1746:24
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25
 ❯ job node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1823:20
 ❯ flushPreFlushCbs node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:335:13

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: ResizeObserver is not defined
 ❯ Object.connectedLocationStrategy [as connected] node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:205:9
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:97:72
 ❯ EffectScope.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:41:24
 ❯ node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:91:14
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:176:22
 ❯ callWithAsyncErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:185:21
 ❯ ReactiveEffect.getter [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1746:24
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25
 ❯ job node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1823:20
 ❯ flushPreFlushCbs node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:335:13

This error originated in "src/components/__tests__/DialogContentDailyUpdateBase.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

As you can see, previously it was saying "Maximum call stack size exceeded" and now it's saying "ResizeObserver is not defined" which is the actual error and makes much more sense.

@edison1105
Copy link
Member

could you provide a runnable minimal reproduction?

@Maxim-Mazurok
Copy link
Author

I'll try to come up with something, likely this weekend
We're basically using VTL and Vuetify VSelect.

@Maxim-Mazurok
Copy link
Author

Here's the repro: https://github.com/Maxim-Mazurok/vue-8074-repro

Latest Vue is used.

Updating from vuetify 3.1.4 to 3.1.5 "resolves" the issue.
And running npm update and then reverting back to vuetify 3.1.4 also "resolves" the issue.
I'm saying "resolves" in quotes because I assume that vue still has to avoid going into an infinite loop.

@Maxim-Mazurok
Copy link
Author

@edison1105 did the repro help?

@edison1105 edison1105 added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label May 11, 2023
@edison1105
Copy link
Member

@Maxim-Mazurok Thanks, It can reproduce the problem.

@samueleiche
Copy link

samueleiche commented Oct 25, 2023

Bump. We also stumbled on this issue which crashes our app. We are not using Vuetify.

@github-actions github-actions bot locked and limited conversation to collaborators Aug 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Projects
None yet
Development

No branches or pull requests

3 participants