Description
Prerequisites
- I am using the correct version of React-Bootstrap for my version of Bootstrap
- I have searched for duplicate or closed issues
- I have read the contributing guidelines
Describe the bug
Error: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
at createUnhandledError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/console-error.js:27:49)
at handleClientError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js:44:56)
at console.error (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/globals/intercept-console-error.js:48:56)
at Object.elementRefGetterWithDeprecationWarning (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react-jsx-runtime.development.js:377:17)
at NoopTransition (webpack-internal:///(app-pages-browser)/./node_modules/@restart/ui/esm/NoopTransition.js:27:110)
at react-stack-bottom-frame (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:23610:20)
at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4646:22)
at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:8032:19)
at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:9689:18)
at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15064:22)
at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14888:41)
at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14868:11)
at performWorkOnRoot (webpack-internal:///(
5DB1
app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14351:13)
at performSyncWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15970:7)
at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15830:21)
at flushPassiveEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15495:13)
at commitRootImpl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15413:49)
at commitRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15273:11)
at Object.onUnsuspend (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:20076:11)
Expected behavior
No response
To Reproduce
No response
Reproducible Example
I can't reproduce the error
Screenshots
No response
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
No response
What version of React-Bootstrap are you using?
2.10.8
What version of Bootstrap are you using?
5.3.3
Additional context
My package.json:
{
"name": "ui",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"expose": "next dev -H 0.0.0.0",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@eslint/config-array": "^0.19.1",
"@reduxjs/toolkit": "^2.5.0",
"axios": "^1.7.9",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"del": "^8.0.0",
"dotenv": "^16.4.7",
"formik": "^2.4.6",
"glob": "^11.0.1",
"jwt-decode": "^4.0.0",
"lru-cache": "^11.0.2",
"next": "^15.1.6",
"next-nprogress-bar": "^2.4.3",
"react": "^19.0.0",
"react-bootstrap": "^2.10.8",
"react-device-detect": "^2.2.3",
"react-dom": "^19.0.0",
"react-redux": "^9.2.0",
"react-toastify": "^11.0.3",
"redux": "^5.0.1",
"rimraf": "^6.0.1",
"sass": "^1.83.4",
"swiper": "^11.2.1",
"yup": "^1.6.1"
},
"devDependencies": {
"@svgr/webpack": "^8.1.0",
"@types/node": "^22.10.10",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@types/redux": "^3.6.0",
"babel-plugin-inline-react-svg": "^2.0.2",
"eslint": "^9.19.0",
"eslint-config-next": "^15.1.6",
"typescript": "^5.7.3"
}
}