Cannot read properties of null (reading 'append') - @cypress/vue

Current behavior

I’ve been unable to run any cypress tests that leverage @cypress/vue package. It always fails with Cannot read properties of null (reading 'append') Related code in node_modules/@cypress/vue/dist/cypress-vue.esm-bundler.js

        var document = cy.state('document');
        var el = document.getElementById(ROOT_ID);
        var componentNode = document.createElement('div');
        el.append(componentNode);

Via: yarn cypress open

Via: yarn cypress run

  1) HelloWorld
       renders a message:
     TypeError: Cannot read properties of null (reading 'append')
      at Context.eval (http://localhost:58195/__cypress/tests?p=cypress/integration/hello-world.spec.js:382:8)

I’ve been banging my head against this error message for days. Am I missing something obvious? Any help is greatly appreciated.

Sample repo provided

Desired behavior

Be able to successfully run the Hellow World cypress test

Test code to reproduce

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

yarn install
yarn cypress open

Cypress Version

9.5.2

Other

No response

[Craig1f]

Confirmed this is fixed by modifying the auto-generated component-index..html, line 10 from:

<div data-cy-root></div> to <div data-cy-root id="__cy_root"></div>

[arielrahmane]

For Vue 2 users: this is solved by using @cypress/vue2