Unable to build with Webpack after importing Mediapipe (Module parse failed: Unexpected token)

[maxwellmooney13]

OS Platform and Distribution

Windows 11

Compiler version

No response

Programming Language and version

TypeScript 5.4.3

Installed using virtualenv? pip? Conda?(if python)

No response

MediaPipe version

0.10.12

Bazel version

No response

XCode and Tulsi versions (if iOS)

No response

Android SDK and NDK versions (if android)

No response

Android AAR (if android)

None

OpenCV version (if running on desktop)

No response

Describe the problem

We are trying to leverage the mediapipe library in our application. No issues when installing mediapipe, no issues when importing various values from mediapipe and using it in a file, no issues importing that file to a different file, but things go south when calling a function from that file. We have a number of build scripts for this project one of which uses Webpack (version 5.91.0). When running the Webpack related script we end up with a failed build that states Module parse failed: Unexpected token from the vision_bundle.mjs file from mediapipe pointing to 855:53. I've seen a few other posts online where someone ran into the same issue (not with mediapipe but in general) but their solutions do not work for me. Wondering if this was seen before or if there is a concrete solution for this. Thank you in advance and I apologize if this is the wrong issue type.

Complete Logs

ERROR in ./node_modules/@mediapipe/tasks-vision/vision_bundle.mjs 855:53
Module parse failed: Unexpected token (855:53)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     var _context10;
|     const e = [],
>       n = _entriesInstanceProperty(_context10 = super).call(_context10);
|     for (var r; !(r = n.next()).done;) (r = r.value)[0] = t(r[0]), r[1] = t(r[1]), e.push(r);
|     return e;
 @ ./src/media/vbg-utils.ts 2:0-74 33:28-58 34:25-57
 @ ./src/sessions/video-session-handler.ts 18:0-53 543:4-19
 @ ./src/index.ts 8:0-49 8:0-49

webpack 5.91.0 compiled with 1 error and 3 warnings in 10121 ms

[maxwellmooney13]

I also tried using require(...) rather than import so it will use commonjs rather than the ESModule but the issue persists.

[kuaashish]

Hi @maxwellmooney13,

Could you kindly provide us steps you are following from our documentation? This information will help us to understand the issue better and reproduce it if required.

Thank you!!

[maxwellmooney13]

Hi @kuaashish !

I installed the dependency @mediapipe/tasks-vision to my project in order to help with image segmentation. After that I had a file that imports FilesetResolver and ImageSegmenter from the above dependency. From there I used those imports in different ways in that same file. From the mentioned file, I exported a function to be used elsewhere. We still won't have the build issue by this point however once we import the function elsewhere and call it, we will get the issue when attempting to build using Webpack. Hopefully that helps! Let me know if I can provide more information

[schmidt-sebastian]

Are you able to force Webpack to use the .cjs files (instead of .mjs)?

[maxwellmooney13]

Hi @schmidt-sebastian

I did try that as well I believe and I got the same result

[maxwellmooney13]

Hi all, just bumping this