[Bug]: The export SelfieSegmentation was not found in module

[WeSpread]

What happened?

in my nextjs15 + react 19 webapp am getting this issue.

The export SelfieSegmentation was not found in module [project]/node_modules/@mediapipe/selfie_segmentation/selfie_segmentation.js [app-ssr] (ecmascript).

`
"use client";
import { HMSPrebuilt } from "@100mslive/roomkit-react";
import { useHMSActions } from "@100mslive/react-sdk";
import { useEffect, useRef, useState } from "react";

const MainPage = () => {
const [isMeetingEnded, setIsMeetingEnded] = useState(false);
const prebuiltRef = useRef(null);

useEffect(() => {
if (prebuiltRef.current) {
prebuiltRef.current.hmsNotifications.onNotification(msg => console.log(handleLeave));
prebuiltRef.current.hmsStore.subscribe(currentRoomState => console.log(handleLeave), selectRoomState);
}
}, []);

const handleLeave = () => {
setIsMeetingEnded(true);
};

if (isMeetingEnded) {
return ;
}
return (
<div style={{ height: "100vh" }}>


);
};

export default MainPage;
const MeetingEnded = () => {
return (

Meeting Ended

Thank you for participating!

);
};
`

How can we reproduce the bug?

• make a new nextjs15 app
• install import { HMSPrebuilt } from "@100mslive/roomkit-react"; import { useHMSActions } from "@100mslive/react-sdk";
• and see the magic.

What browsers are you seeing the problem on?

No response

[github-actions]

Hello! Thank you for filing an issue.

Please include relevant logs or detailed description for faster resolutions.

We really appreciate your contribution!

[gHashTag]

Yes. Same issue "react": "^18.3.1"

[gHashTag]

Downgrade "next": "14.2"

[raviteja83]

https://github.com/100mslive/web-sdks/blob/main/examples/prebuilt-react-integration/vite.config.js#L7 we had to add this for build with vite. Something similar might be needed for nextjs setup. we did not need this with webpack though,

[liamross]

I have added a patch to the package to do the same thing but the issue still is a complete blocker. Are there any updates with this?

[liamross]

I fixed this by manually patching the @mediapipe/selfie_segmentation package.

Here's the fix until the @mediapipe/selfie_segmentation file is fixed, or this package stops using it.

1. npm i patch-package postinstall-postinstall
2. Go into node_modules/@mediapipe/selfie_segmentation/selfie_segmentation.js
3. Add exports.SelfieSegmentation=nd; to the last line of the file
   • nd is the obfuscated variable that SelfieSegmentation is assigned to. In previous fixes the solution was exports.SelfieSegmentation=SelfieSegmentation; but that no longer works, and there's a chance that the obfuscated variable changes with each release, so look at the same line for something that looks like Aa("SelfieSegmentation",nd); which is where SelfieSegmentation is assigned to nd (or replace nd with whatever the second argument is in your case)
4. Run npx patch-package @mediapipe/selfie_segmentation to generate a patch for the package
5. Add the line "postinstall": "patch-package" to your scripts so that every time you run npm i it will patch the package