@types/react-router-dom gives errors when vite build

Question

I am making a react app with vite and typescript. When I use "vite" for development, it works fine. But when I use "tsc && vite build", @types/react-router-dom and @types/react-router throws hundreds of errors, such as

node_modules/@types/react-router-dom/index.d.ts:13:10 - error TS2305: Module '"react-router"' has no exported member 'match'.

package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-router-dom": "^5.3.2",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.3",
    "sass": "^1.43.5",
    "tailwindcss": "^2.2.19",
    "typescript": "^4.5.2",
    "vite": "^2.6.14"
  }
}

Usage of react-router-dom

App.tsx

import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Nav from './components/Nav'

export default function App() {
    return (
        <>
            <Router>
                <Nav/>
                <Routes>
                    <Route path="/"></Route>
                </Routes>
            </Router>
        </>
    )
}

Nav.tsx

import React from 'react'
import { Link } from 'react-router-dom'
import Logo from '../media/profile1.jpg'
import 'Nav.scss'

export default function Nav() {
    return (
        <>
            <header className="fixed top-0 left-0 flex flex-row items-center bg-gradient-to-r from-violet-700 via-indigo-700 to-blue-700 w-screen" style={{ height: '20vh' }}>
                <Link to='/' className="h-2/3 md:h-4/5 mx-4">
                    <img className="h-full rounded-3xl" src={Logo} alt="" />
                </Link>
                <div className="h-2/3 md:h-4/5 mx-4 flex items-center justify-center text-white font-bold text-7xl title">
                </div>
            </header>
            <div style={{ marginBottom: '20vh' }} ></div>
        </>
    )
}

score 3 · Answer 1 · answered Nov 27 '21 at 21:10

3

I actually found out that react-router-dom v6 does not need @types/react-router-dom, so I solved this problem just by deleting it.

answered Nov 27 '21 at 21:10

genius

73
2
9

AbdulAzeez Olanrewaju · Answer 2 · 2022-03-22T23:01:12.193

3

React Router V6 does not need @types/react-router-dom.

Just do npm uninstall @types/react-router-dom or yarn delete @types/react-router-dom.

Then build yarn build or npm run build.

edited Mar 22 '22 at 23:01

answered Mar 11 '22 at 04:09

AbdulAzeez Olanrewaju

976
1
13
32

1

For people that are looking, this is what fixed it for me. – eagle12 Sep 21 '22 at 13:52
yarn remove @types/react-router-dom* – OneKe Feb 11 '23 at 12:04

@types/react-router-dom gives errors when vite build

2 Answers2