Uncaught TypeError: Cannot read properties of undefined (reading 'activeElement')

[RuellePaul]

When migrate to Vite 4, I'm getting this error :

Uncaught TypeError: Cannot read properties of undefined (reading 'activeElement')
    at Object.getActiveElement (cleave-react-node.js:2766:37)
    at Object.setSelection (cleave-react-node.js:2741:31)
    at ReactClassComponent.componentDidUpdate (cleave-react-node.js:103:15)
    at commitLifeCycles (react-dom.development.js:20684:24)
    at commitLayoutEffects (react-dom.development.js:23426:7)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at commitRootImpl (react-dom.development.js:23151:9)
    at unstable_runWithPriority (scheduler.development.js:468:12)

I'm using the lib correctly 'cause it worked with CRA.

This code from this cleave-react-node seems involved :

getActiveElement: function getActiveElement(parent) {
   var activeElement = parent.activeElement;
   if (activeElement && activeElement.shadowRoot) {
      return this.getActiveElement(activeElement.shadowRoot);
   }
   return activeElement;
}

Do you have any idea what I can do ?

[jdavis-software]

@RuellePaul did you ever find a solution for this? running into the same problem.

[RuellePaul]

@RuellePaul did you ever find a solution for this? running into the same problem.

I changed for another library 😄

[boydvoid]

@RuellePaul which library?

[devmetal]

Hey, if anyone has this issue i got a solution for this. The problem is laying under the missing or empty global object. I had to update a project from cra to vite and i ended up with this same issue. The cleave is old but the problem actually the missing global object. The webpack is polyfills us but the vite dont. In the beginning i added a definition for it in the vite config, but it was not enough because its empty but exists. The cleave tries to read the document from it but its undefined.

I added a script in the html tag:

<script>
    if (!window.global) {
      window.global = window;
    }
  </script>

Or short: window.global ||= window. And problem solved.

Anyway, the package is really old so i'm going to replace it with something more modern, but at least this solves the issue.