Exception with react-router v6: (0, _reactRouterDom.withRouter)(LinkContainer) is not a function

[bggolding]

I’m trying to use react-router-bootstrap with react-router v6 but I keep getting this error when the app starts.

LinkContainer.js:155 Uncaught TypeError: (0 , _reactRouterDom.withRouter) is not a function
    at Object../node_modules/react-router-bootstrap/lib/LinkContainer.js (LinkContainer.js:155)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/react-router-bootstrap/lib/IndexLinkContainer.js (IndexLinkContainer.js:14)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/react-router-bootstrap/lib/index.js (index.js:6)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/components/TopNavBar.js (TopNavBar.css?1017:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/app/App.js (App.css?56b3:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?f3f6:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (version.js:2)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

I can’t work out how to fix this – can anyone give me some suggestions?

I’m using versions:

    "react-router": "^6.0.0-beta.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^6.0.0-beta.0",

Thanks,

 Ben.

[bggolding]

Here’s a small file that demonstrates the problem. I used create-react-app —typescript to generate an app and then used this as App.js:

import React, {ReactElement} from 'react';
import './App.css';
import {BrowserRouter, NavLink} from 'react-router-dom';
import {LinkContainer} from 'react-router-bootstrap';
import {Route, Routes} from "react-router";

const Home: ReactElement = (
    <div>Home</div>
);

const Contact: ReactElement = (
    <div>Contact</div>
);

const App: React.FC = () => (
    <div className="App">
        <BrowserRouter>
            <h1>React Router Simple Starter</h1>
            <ul className="header">
                {/*<li><NavLink className="active" to="/">Home</NavLink></li>*/}
                {/*<li><NavLink to="/contact">Contact</NavLink></li>*/}
                <LinkContainer className="active" to="/">
                    <input type="button">Home</input>
                </LinkContainer>
                <LinkContainer to="/contact">
                    <input type="button">Contact</input>
                </LinkContainer>
            </ul>
            <div className="content">
                <Routes>
                    <Route path="/" element={Home}/>
                    <Route path="/contact" element={Contact}/>
                </Routes>
            </div>
        </BrowserRouter>
    </div>
);

export default App;

[bggolding]

Thank you. Is there a release date for this fix?

[sam2schwab]

@bggolding Until the fix is released or my PR accepted, you can use my fork if you wish.
Its the same exact code as the the upgrade-react-router branch (v6 compatibility) but with an npm prepare script that allows it to be installed from the GitHub url :

npm i --save https://github.com/sam2schwab/react-router-bootstrap.git#upgrade-react-router

[SmashPlusUltra]

@bggolding Until the fix is released or my PR accepted, you can use my fork if you wish.
Its the same exact code as the the upgrade-react-router branch (v6 compatibility) but with an npm prepare script that allows it to be installed from the GitHub url :

npm i --save https://github.com/sam2schwab/react-router-bootstrap.git#upgrade-react-router
I had the same error, and I installed this version but I got the followint error
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of App.
React 16
createFiberFromTypeAndProps
createFiberFromElement
createChild
reconcileChildrenArray
reconcileChildFibers
reconcileChildren
updateHostComponent
beginWork
callCallback
invokeGuardedCallbackDev
invokeGuardedCallback
beginWork$1
performUnitOfWork
workLoopSync
performSyncWorkOnRoot
flushSyncCallbackQueueImpl
unstable_runWithPriority scheduler.development.js:653
React 6
runWithPriority$1
flushSyncCallbackQueueImpl
flushSyncCallbackQueue
discreteUpdates$1
discreteUpdates
dispatchDiscreteEvent

    ------------
    The above error occurred in the <div> component:
in div (created by DropdownMenu)
in DropdownMenu (created by NavDropdown)
in div (created by NavItem)
in NavItem (created by ReactOverlaysDropdown)
in ReactOverlaysDropdown (created by Dropdown)
in Dropdown (created by NavDropdown)
in NavDropdown (at App.js:141)
in div (created by ForwardRef)
in ForwardRef (created by Nav)
in Nav (at App.js:130)
in div (created by Context.Consumer)
in Transition (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in NavbarCollapse (at App.js:129)
in nav (created by Navbar)
in Navbar (at App.js:118)
in div (at App.js:118)
in Resizable (created by GridItem)
in DraggableCore (created by GridItem)
in GridItem (created by ReactGridLayout)
in div (created by ReactGridLayout)
in ReactGridLayout (created by ResponsiveReactGridLayout)
in ResponsiveReactGridLayout (created by WidthProvider)
in WidthProvider (at App.js:98)
in div (at App.js:88)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:87)
in div (at SignalRConnector.js:46)
in Unknown (at App.js:86)
in Provider (at App.js:85)
in App (at src/index.js:13)
in StrictMode (at src/index.js:11)

<NavDropdown title="Example" id="basic-nav-dropdown">                                                                                         
                                            <LinkContainer to="/Home">
                                                <NavDropdown.Item > 
                                                   Home
                                                </NavDropdown.Item > 
                                            </LinkContainer>

[nick-tester]

I just use { useNavigate } from "react-router-dom" to go around this problem.

for example,

import { useSelector } from "react-redux";
import { Navbar, Nav, Container, NavDropdown } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import { FaShoppingCart, FaUser } from "react-icons/fa";

const Header = () => {
const { user } = useSelector(state => state.authLogin);

const navTo = useNavigate();

function logoutHandler() {
console.log("logout");
}

return (

<Navbar.Brand onClick={() => navTo("/")}>
Pro
Shop
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">

<Nav.Link onClick={() => navTo("/cart")}> Cart</Nav.Link>
{user ? (

<NavDropdown.Item onClick={() => navTo("/profile")}>
profile
</NavDropdown.Item>
<NavDropdown.Item onClick={logoutHandler}>
logout
</NavDropdown.Item>

) : <Nav.Link onClick={() => navTo("/auth/login")}> Sign In</Nav.Link>}

</Navbar.Collapse>



)
};

export default Header;