-
Notifications
You must be signed in to change notification settings - Fork 163
Closed
@sheam
Description
When I try to run this with react-router-dom vs 6.0.1 I get the following compile error:
TypeError: (0 , _reactRouterDom.withRouter) is not a function
./node_modules/react-router-bootstrap/lib/LinkContainer.js
C:/Users/sheam/Code/hs-image-manager/node_modules/react-router-bootstrap/lib/LinkContainer.js:155
152 | strict: false,
153 | activeClassName: 'active'
154 | };
> 155 | exports.default = (0, _reactRouterDom.withRouter)(LinkContainer);
View compiled
__webpack_require__
C:/Users/sheam/Code/hs-image-manager/webpack/bootstrap:856
853 |
854 | __webpack_require__.$Refresh$.init();
855 | try {
> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 857 | } finally {
858 | __webpack_require__.$Refresh$.cleanup(moduleId);
859 | }
View compiled
My code looks like this:
function App()
{
return (
<div className="App">
<Router>
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">HS Image Manager</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<LinkContainer to="/">
<Nav.Link>Upload</Nav.Link>
</LinkContainer>
<LinkContainer to="/manage">
<Nav.Link>Manage</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Routes>
<Route path="/" element={<UploadPage/>}/>
<Route path="/manage" element={<ManagePage/>}/>
</Routes>
</Router>
</div>
);
}
I am using CRA typescript template and my package.json looks like this:
{
"name": "hs-image-manager",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-router-bootstrap": "^0.24.5",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-dom": "^17.0.2",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^6.0.1",
"react-scripts": "4.0.3",
"sass": "^1.43.4",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Is this compatible with RRD 6+?
Metadata
Metadata
Assignees
Labels
No labels