You may need an additional loader to handle the result of these loaders.

[skandula106]

Have I written custom code (as opposed to using a stock example script provided in MediaPipe)

No

OS Platform and Distribution

windows 10

MediaPipe Tasks SDK version

@mediapipe/tasks-vision": "0.10.12

Task name (e.g. Image classification, Gesture recognition etc.)

Module parse failed: Unexpected token (23:18)

Programming Language and version (e.g. C++, Python, Java)

react 18

Describe the actual behavior

getting compilation error

Describe the expected behaviour

resolve compilation error

Standalone code/steps you may have used to try to get what you need

getting compilation error

Other info / Complete Logs

./node_modules/@mediapipe/tasks-vision/vision_bundle.mjs 23:18
Module parse failed: Unexpected token (23:18)
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.
| const h = "undefined" != typeof TextEncoder;
| function c(t) {
>   if (h) t = (a ||= new TextEncoder()).encode(t);else {
|     let n = 0;
|     const r = new Uint8Array(3 * t.length);

[kuaashish]

Hi @skandula106,

Could you kindly provide us with comprehensive details regarding the issue? This includes the steps you are following from our documentation, the operating system you are using, and the version of MediaPipe in use. This information will help us to understand the issue better and reproduce it if required.

Thank you!!

[skandula106]

hi @kuaashish,

I have added this package to my React JS project, I'm using this package for segmentation in digital avatar then while running my project I'm getting above compilation error, but when i deploy code to my servers it's working fine i'm using below versions "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "4.0.3", "@mediapipe/tasks-vision": "^0.10.0",

[schmidt-sebastian]

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

[github-actions[bot]]

This issue has been marked stale because it has no recent activity since 7 days. It will be closed if no further activity occurs. Thank you.

[github-actions[bot]]

This issue was closed due to lack of activity after being marked stale for past 7 days.

[sgrund14]

hello @kuaashish @schmidt-sebastian ! i'm actually getting the same error when using a package which consumes @media-pipe/tasks-vision

the upstream package is @livekit/[email protected]

i'm working in a Create-React-App using react-scripts @ 4.0.3

and overriding the webpack using CRACO like so:

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // Add a rule to handle .cjs and .mjs files
      webpackConfig.module.rules.push({
        test: /\.(cjs|mjs)$/,
        include: /node_modules/,
        type: "javascript/auto"
      });

      return webpackConfig;
    },
  },
};

I end up getting this error:

./node_modules/@livekit/track-processors/node_modules/@mediapipe/tasks-vision/vision_bundle.mjs 23:18
Module parse failed: Unexpected token (23:18)
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.
| const c = "undefined" != typeof TextEncoder;
| function h(t) {
>   if (c) t = (a ||= new TextEncoder()).encode(t);else {
|     let n = 0;
|     const r = new Uint8Array(3 * t.length);

any insight appreciated!