Issues getting Offcanvas working with reactstrap

July 12, 2022

I’m working with an old react app. I want to use the Offcanvas component that’s in reactstrap but the version I’m on does that not that installed.

Since the app is rather old I tried to do a pass and update everything at once. This however broke the app. So to keep my sanity I’m trying to only update the reactstrap lib. I ran npm update reactstrap npm update bootstrap and npm update react-bootstrap but I’m still getting a warning "export 'Offcanvas' was not found in 'reactstrap'

I do not have that much experience when it comes to react so I’m struggling when it comes to updates and configurations. Any advice on this issues and a general way to debug this would be extremely welcomed.

Here’s my package json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.7.0",
        "@babel/plugin-transform-runtime": "^7.17.0",
        "@babel/preset-react": "^7.7.0",
        "axios": "^0.19",
        "bootstrap": "^4.3.1",
        "cross-env": "^5.2.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.1.4",
        "lodash": "^4.17.15",
        "popper.js": "^1.16.0",
        "react": "^16.11.0",
        "react-dom": "^16.11.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.23.3",
        "sass-loader": "^7.3.1"
    },
    "dependencies": {
        "@babel/runtime": "^7.17.9",
        "@fortawesome/fontawesome-svg-core": "^1.2.25",
        "@fortawesome/free-solid-svg-icons": "^5.11.2",
        "@fortawesome/react-fontawesome": "^0.1.7",
        "@yaireo/tagify": "^4.8.1",
        "datepicker": "0.0.0",
        "query-string": "^6.9.0",
        "react-autosuggest": "^9.4.3",
        "react-bootstrap": "^2.0.0-rc.0",
        "react-confirm-alert": "^2.4.1",
        "react-draggable": "^3.3.2",
        "react-router-dom": "^5.1.2",
        "react-switch": "^5.0.1",
        "react-table": "^7.7.0",
        "react-tabs": "^3.0.0",
        "reactstrap": "^8.1.1",
        "recharts": "^1.8.5",
        "styled-components": "^5.3.0"
    }
}