typescriptでreact-router-domを使おうとしたらエラーが出ます。

###本題
reactでtypescriptを使ってコードを書いてます。
HooksのuseHistoryを使おうとして@types/react-router-domをインポートしたのですが、エラーが出てしまいます。

エラー文

問題でコンパイル：バツ

./src/components/topPage/topMain.tsx 8：0-46のエラー

モジュールが見つかりません：エラー：「/ Users / maeharanoboru / Desktop / distribution-site / src / components / topPage」の「react-router-dom」を解決できません

./node_modules/react-router-dom/index.jsのエラー

モジュールのビルドに失敗しました（./node_modules/source-map-loader/dist/cjs.jsから）：
エラー：ENOENT：そのようなファイルまたはディレクトリはありません。「/ Users / maeharanoboru / Desktop / distribution-site / node_modules / react-router-dom /index.js」を開きます。

解決しようとして試したこと

typescriptのパッケージがエラーを起こしていると思い、　@types/react-router-domを　package.jsonから削除して、javascriptのreact-router-domをインストールしてみたり、もしくは両方をインストールしてやってみたりしましたが、解決しませんでした。

コード

topMain.tsx

import React, { FC, useState } from "react";
import { createStyles, makeStyles } from "@material-ui/core/styles";
import { useHistory } from "react-router-dom";
import Paper from "@material-ui/core/Paper";
import SearchIcon from "@material-ui/icons/Search";
import IconButton from "@material-ui/core/IconButton";
import InputBase from "@material-ui/core/InputBase";

import pencil from "../../assets/images/pencil.jpg";

const useStyle = makeStyles(() =>
createStyles({
background: {
backgroundImage: url(${pencil}),
backgroundSize: "cover",
height: "100vh",
},

paper: {
  position: "relative",
  marginLeft: "auto",
  marginRight: "auto",
  top: "33%",
  width: "45%",
},

})
);

const TopMain: FC = () => {
const classes = useStyle();
const [keyword, setKeyword] = useState("");
const history = useHistory();

const handleSubmit = () => {
history.push("/search/" + keyword);
};

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setKeyword(event.target.value);
};

return (
<div className={classes.background}>
<Paper className={classes.paper} component="form" onSubmit={handleSubmit}>
<IconButton type="submit">
<SearchIcon />
</IconButton>
<InputBase placeholder="無料素材を検索" onChange={handleChange} />
</Paper>
</div>
);
};

export default TopMain;

packge.json

{
"name": "distribution-site",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.0",
"@types/node": "^16.11.19",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.4",
"web-vitals": "^2.1.2"
},
"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"
]
}
}

hoshi-takanori

2022/01/07 02:38

react-router-dom": "^5.3.0 を追加すると良いかも。

wasd0109

2022/01/07 05:37

@typesが付いてるものはTypeScript版ではなく、ライブラリーのタイプを記入されてるものです、機能は一切ありません。なので上記のように普通のreact-router-domもインストールしないといけませんが、両方入れた後もエラってるという記述がありましたので、両方入れた後のエラーを載せてもらえますか？