error while building the project

[MHgh0st]

Hello everyone, I'm using react-joyride in a next js 15 with react 18 but when I try to build my project, I face this error:

pnpm build

[email protected] build C:\Users\HP\Desktop\team-insight
next build

▲ Next.js 15.1.2

• Environments: .env
• Experiments (use with caution):
  · turbo

Creating an optimized production build ...
✓ (pwa) Compiling for server...
✓ (pwa) Compiling for server...
✓ (pwa) Compiling for client (static)...
○ (pwa) Service worker: C:\Users\HP\Desktop\team-insight\public\sw.js
○ (pwa) URL: /sw.js
○ (pwa) Scope: /
Failed to compile.

./node_modules/react-joyride/dist/index.mjs
Attempted import error: 'unmountComponentAtNode' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/react-joyride/dist/index.mjs
./src/components/tourProvider.tsx

./node_modules/react-joyride/dist/index.mjs
Attempted import error: 'unstable_renderSubtreeIntoContainer' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/react-joyride/dist/index.mjs
./src/components/tourProvider.tsx

Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

how can I solve that?

[MelHerVi]

Hi guys,

I have the same problem with React 19 and I cant build the project.

We have some solution that we can apply?

Thanks for your help.

[Slenzy2]

Hi @MelHerVi did you come across any solution for this yet?

[MelHerVi]

Hello,

I upgrade version, in package.json: "react-joyride": "^3.0.0-7"

package-lock.json:
"node_modules/react-joyride": {
"version": "3.0.0-7",
"resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-3.0.0-7.tgz",
"integrity": "sha512-NBgtdm8QehHEVI/Qkakb4EJ/WjKN7bQaZgZmO/01v1p2yBlzAcXyKM36FeS1YZaywX8v8R79bF5Z0OcV5BK1og==",
"license": "MIT",
"dependencies": {
"@gilbarbara/deep-equal": "^0.3.1",
"@gilbarbara/hooks": "^0.8.2",
"@gilbarbara/types": "^0.2.2",
"deepmerge": "^4.3.1",
"is-lite": "^1.2.1",
"react-floater": "^0.9.5-4",
"react-innertext": "^1.1.5",
"scroll": "^3.0.1",
"scrollparent": "^2.1.0",
"tree-changes-hook": "^0.11.2"
},
"peerDependencies": {
"react": "16.8 - 19",
"react-dom": "16.8 - 19"
}
}

repo: https://github.com/gilbarbara/react-joyride/tree/next

Then, I found another bug:
#1121

And I resolved this bug working directly with DOM:

const handleSkipClick = () => {
// Simulate the behavior that should occur in the callback
localStorage.setItem("topology-tour-completed", "true");
setRunTour(false);
document.body.style.overflow = "";

// Remove the tour element
const targetElement = document.getElementById(
"tour-sidenav-right-target"
);
if (targetElement && targetElement.parentNode) {
targetElement.parentNode.removeChild(targetElement);
}
};

// Wait for the DOM to update and the skip button to be available
setTimeout(() => {
const skipButton = document.querySelector(
'[data-test-id="button-skip"]'
);
if (skipButton) {
skipButton.addEventListener("click", handleSkipClick);
}
}, 500);

I hope it helps you,

Mel.

[Slenzy2]

Thank you for this 🙏🏾