"object is not extensible" error in Cypress 14 Vue component testing

[hackel]

Current behavior

I'm trying to upgrade from Cypress 13.17.0 to 14.0.3, and my component tests are consistently failing with a variation of the following when trying to mount the component:

  1) <LaneSelection />
       renders:
     TypeError: Cannot define property inputMappingTable, object is not extensible
      at Function.defineProperty (<anonymous>)
      at useTemplateRef (http://localhost:51730/__cypress/src/node_modules/.vite/deps/chunk-46253U5O.js?v=3811e48f:4053:14)
      at setup (http://localhost:51730/__cypress/src/resources/assets/vue/modules/BidTool/LaneSelection.vue:128:27)
      at callWithErrorHandling (http://localhost:51730/__cypress/src/node_modules/.vite/deps/chunk-46253U5O.js?v=da819e0b:2743:19)
      at setupStatefulComponent (http://localhost:51730/__cypress/src/node_modules/.vite/deps/chunk-46253U5O.js?v=da819e0b:10463:25)
      at setupComponent (http://localhost:51730/__cypress/src/node_modules/.vite/deps/chunk-46253U5O.js?v=da819e0b:10424:36)
      at mountComponent (http://localhost:51730/__cypress/src/node_modules/.vite/deps/chunk-46253U5O.js?v=da819e0b:7780:7)
      at processComponent (http://localhost:51730/__cypress/src/node_modules/.vite/deps/chunk-46253U5O.js?v=da819e0b:7746:9)
      at patch (http://localhost:51730/__cypress/src/node_modules/.vite/deps/chunk-46253U5O.js?v=da819e0b:7262:11)
      at mountChildren (http://localhost:51730/__cypress/src/node_modules/.vite/deps/chunk-46253U5O.js?v=da819e0b:7494:7)

It appears to be related to the use of Vue's useTemplateRef function, but I didn't have this problem with the previous version of Cypress. And just to add some more fun to the mix, when I run the tests locally, eventually they start passing just fine without any code changes.

Desired behavior

Component tests should run successfully.

Test code to reproduce

https://github.com/hackel/cypress-test-tiny

Cypress Version

14.0.3

Node version

20.18.1

Operating System

Ubuntu latest / 24.04

Debug Logs

Other

No response

[jennifer-shehane]

@hackel What's the version of Vue that you're using? Can you probide a small reproducible example that we can see?

[hackel]

@jennifer-shehane Vue 3.5.13. I've been trying to reproduce it, but no luck so far. Everything's working in my test repo. I will keep trying, though! Thanks.

[hackel]

@jennifer-shehane Okay, I was finally able to reproduce the issue!

https://github.com/hackel/cypress-test-tiny

Running npx cypress run --component once results in: TypeError: Cannot define property test, object is not extensible. Run it a second time, however, and the test passes! This appears to have something to do with Vite's dependency optimizing. I found that I can trigger Vite to re-optimize dependencies by commenting out the alias on line 21 in vite.config.js. When I do this, I see "Re-optimizing dependencies because vite config has changed" and then the test fails again. I can repeat this comment/uncomment procedure to trigger the failing test. If I remove bootstrap-vue-next, I don't see this behaviour, so it's either triggered by that dependency or unplugin-vue-components.

Please ping me if I can give any further details.

Edit: If I disable dependency optimization with:

    optimizeDeps: {
        noDiscovery: true,
        include: [],
    },

Then the test consistently passes again.