I'm trying to use React Router in Typescript React app. After running yarn create react-app my-app --template typescript, as told to do in create-react-app docs and installing @types/react-router-dom my package.json looks as following:
{
"name": "allpic-frontend",
"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": "^16.9.53",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.6",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4"
},
"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"
]
}
}
My App.tsx consists of the following content:
import React from 'react';
import './App.css';
import {BrowserRouter as Router, Link, Route, Switch} from "react-router-dom";
function App() {
return (
<Router>
<Link to="/">
<h1>Home</h1>
</Link>
<Link to="/upload">
<h1>Upload</h1>
</Link>
<Switch>
<Route path="/">
<h1>hello world</h1>
</Route>
</Switch>
</Router>
);
}
export default App;
Upon running yarn start I'm getting these errors:
Module not found: Can't resolve 'react-router-dom' in '/home/max/Projects/allpic/allpic-frontend/src'
/home/max/Projects/allpic/allpic-frontend/node_modules/react-scripts/scripts/start.js:19
throw err;
^
[Error: ENOENT: no such file or directory, stat '/home/max/.face.icon'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/home/max/.face.icon'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
As I said, this is fresh project. I haven't done anything apart from what I mentioned above. I tried to debug this issue by placing a breakpoint at start.js:19, but I'm not getting any stack trace from the listener.
How can I overcome this issue and make my Typescript app compile and work with React Router?