Cannot find module 'history' or its corresponding type declarations

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

Doesn't compile.

Steps To Reproduce

I'm trying to add ApplicationInsights logging to a React application.

This is working in an old application. I think the problem is that my new application is using version 6 rather than 5 of react-router-dom.

Can ApplicationInsights work with react-router-dom version 6 or do I need to either downgrade react-router-dom or ditch ApplicationInsights?

import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { AppSettings, useAppSettings } from './appSettings';
import { createBrowserHistory } from 'history';
import React, { createContext, FunctionComponent, useContext, useEffect, useRef, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { AuthenticationContextValue, AuthenticationContext } from './authentication/AuthenticationContext';

type AppInsightsValue = {
  appInsights: ApplicationInsights;
} | null;

const AppInsightsContext = createContext<AppInsightsValue>(null);

export const AppInsightsContextProvider: FunctionComponent = ({ children }) => {
  const appSettings: AppSettings | null = useAppSettings();
  const [appInsights, setAppInsights] = useState<ApplicationInsights | null>(null);
  const browserHistory = useRef(createBrowserHistory({ basename: '' }));
  const reactPlugin = useRef(new ReactPlugin());
  const location: Location = useLocation();

  const authContext: AuthenticationContextValue = useContext(AuthenticationContext);

  useEffect(() => {
    if (appSettings === null || appSettings.applicationInsightsConnectionString === null || appSettings.applicationInsightsConnectionString.length === 0) { return; }
    const ai = new ApplicationInsights({
      config: {
        connectionString: appSettings.applicationInsightsConnectionString,
        enableAutoRouteTracking: true,
        extensions: [reactPlugin.current],
        extensionConfig: {
          [reactPlugin.current.identifier]: { history: browserHistory.current },
        },
      }
    });
    ai.loadAppInsights();
    setAppInsights(ai);
  },
    [appSettings]);

  // TODO: This is probably wrong, especially for the back button.
  useEffect(() => {
    if (appInsights === null) { return; }
    appInsights.trackPageView({
      properties: {
        firm: authContext.getFirm(),
        sub: authContext.getUserId()
      }
    });
  }, [appInsights, authContext, location]);

  return (
    <AppInsightsContext.Provider value={appInsights && { appInsights }}>
      {children}
    </AppInsightsContext.Provider>
  );
};

Expected Behavior

Compiles and works.

Additional context

No response

Does this issue have a priority label?

[X] I have added a priority label

Has issue been assigned to a team?

[X] I have added a team label

CDCgov / prime-simplereport

Cannot find module 'history' or its corresponding type declarations #7409