mediapipe: wasm: abort Runtime bug in FaceMesh on javascript in Chrome

EDIT: SEE MY REPLY BELOW FOR CORRECTION OF MASSIVE TYPO. But basically, a hacky workaround in react is to NOT use React.StrictMode

There seems to be a number of people experiencing a similar style of issue to this. I’m developing custom code using the Hands and DrawingUtils modules from MediaPipe. I am using react / JS. I experienced a very similar message. The message would appear most of the time, but there would be times when the error would go away. The code I was using, is very standard and similar to that provided in the docs. I actually found that React was causing the issue (or rather, a react setting could provide a sloppy workaround for the issue). I was testing my code in dev mode (using npm start). However, by default, React uses strict mode when in dev mode. Amongst other things, this means that each component is rendered twice. So in order to mitigate this, I added a flag that made it so that useEffect would only run once. This fixed my errors. However, it was a nightmare to maintain and I don’t think only running the code once can guarantee no errors for all use cases. Ultimately, I simply edited my react app so that it wouldn’t run in strict mode. This fixed the issues that produced error messages similar to what you and others have described. It is a workaround and a poor one (as strict mode has a lot of useful dev features). However, if you want a quick fix, it’s worth a try. So my index.js file went from roughly:

`import React from ‘react’; import ReactDOM from ‘react-dom/client’; import ‘./index.css’; import App from ‘./App’; import reportWebVitals from ‘./reportWebVitals’;

const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render( <App /> ); reportWebVitals();`

TO:

`import React from ‘react’; import ReactDOM from ‘react-dom/client’; import ‘./index.css’; import App from ‘./App’; import reportWebVitals from ‘./reportWebVitals’;

const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render( <React.StrictMode> <App /> </React.StrictMode> ); reportWebVitals();`

Hope this helps in some way. Though, this still wouldn’t explain why the codepen demo doesn’t work. I’ve attached the working version of my project in case you want to have a deeper look at my code. Good luck! project.zip

DON’T Delete the React.StrictMode. We want this there to check if we run into some strange states, effects or callbacks. Which it seems like we do with the mediapipe, the problem seems to be when you trying to setOptions or intialize the same face detection twice (which is bad practice). However we can solve this by saving the current faceDetection and don’t do these calls if it is already setup.

I solved it like this:

let faceDetection = null;
export function initiateFaceTracking() {
 if (!faceDetection) {
   console.log("SETUP NEW FACETRACKING");
   faceDetection = new FaceDetection({
     locateFile: (file: any) => {
       return `${cdnBaseUrl}/${"face_detection"}@${FaceDetectionVersion}/${file}`;
     },
   });

   faceDetection.setOptions({
     ...defaultOptions,
   });

   faceDetection.initialize().then(() => {
     return faceDetection;
   });
 }
}

You could also ofcourse do .stop() threw it away and start up a new FaceDetection if you rather want that.