React Router DOM's Router doesn't accept history correctly

Question

I've been trying to create a utility function that wraps React Testing Library's render function that uses Router to wrap the whole React Element. The code looks like this.

import { ReactElement } from 'react';
import { render as renderRTL } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory, History } from 'history';

export function render(ui: ReactElement) {
  const history = createMemoryHistory();
  return {
    history,
    ...renderRTL(<Router history={history}>{ui}</Router>),
  };
}

The problem here is I keep on getting an error message from TypeScript saying that History<State> is not assignable to History<unknown> on this line of the code.

...renderRTL(<Router history={history}>{ui}</Router>),

This is the full error message.

No overload matches this call.
  Overload 1 of 2, '(props: RouterProps | Readonly<RouterProps>): Router', gave the following error.
    Type 'History<State>' is missing the following properties from type 'History<unknown>': length, goBack, goForward
  Overload 2 of 2, '(props: RouterProps, context: any): Router', gave the following error.
    Type 'History<State>' is not assignable to type 'History<unknown>'.ts(2769)
index.d.ts(105, 5): The expected type comes from property 'history' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Router> & Readonly<RouterProps> & Readonly<{ children?: ReactNode; }>'
index.d.ts(105, 5): The expected type comes from property 'history' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Router> & Readonly<RouterProps> & Readonly<{ children?: ReactNode; }>'

And this is my package.json

{
  "name": "TITLE",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.21",
    "@types/node": "^12.20.6",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.3",
    "web-vitals": "^1.1.1"
  },
  "devDependencies": {
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "@types/history": "^4.7.8",
    "@types/react-router": "^5.1.12",
    "@types/react-router-dom": "^5.1.7",
    "autoprefixer": "9",
    "history": "^5.0.0",
    "husky": "^5.2.0",
    "lint-staged": "^10.5.4",
    "postcss": "7",
    "prettier": "^2.2.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "lint": "eslint --ext .ts,.tsx src",
    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"",
    "eject": "react-scripts eject",
    "prepare": "husky install"
  },
  "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"
    ]
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css}": [
      "npm run format"
    ]
  }
}

The problem should be the missing length, goBack, and goForward properties from the memory history.

Is it a bug with react-router itself?

Answer 1

I accidentally installed history as a dev-dependency, which is causing the types to be incompatible. To resolve this, I remove history and re-install react-router-dom to make sure it's properly installed. Here's how to do it using pnpm

pnpm remove history
pnpm add react-router-dom