Could not find a declaration file for module 'react-tabs' on v4.2.1

[javed24]

I'm on version 4.2.1 and currently working on rewriting our implementation of react-tabs to TypeScript (not planning to bump the major version to 5 for now, just working on migrating it from JS to TS). I'm simply importing the following in my .tsx component

import {Tabs, TabList, Tab, TabPanel} from 'react-tabs';

However, it throws the following error:

Could not find a declaration file for module 'react-tabs'. '/User/<path-to-directory>/node_modules/react-tabs/lib/index.js' implicitly has an 'any' type.

I tried what the error message suggested as a possible solution, which was Try npm i --save-dev @types/react-tabs. After installing it, I tried running npm ci, which didn't remove the error. I've also tried deleting the node_modules folder altogether and running npm install to clear the cache but to no avail. I didn't see anything regarding version 4.2.1 being incompatible with .tsx components or anything of that sort, but I'm not sure what would be the way to address this issue. Any suggestions?

[sergei-maertens]

Looks like the @types/react-tabs package at v5 does not include the types at all anymore - I've resolved this by installing an older version: npm i --save-dev @types/react-tabs@^2.3.4 and extending the interface where required.

edit: this didn't solve it because it was for a much older version. Instead, I added the types in my own codebase based on the master branch:

/**
 * Type declarations for react-tabs are added since v5.0, but that requires React 18+.
 *
 * Types taken from https://github.com/reactjs/react-tabs/blob/main/index.d.ts
 *
 * This can be removed as soon as we use react-tabs 5.0+
 */
declare module 'react-tabs' {
  import {FunctionComponent, HTMLProps} from 'react';

  export interface TabsProps
    extends Omit<HTMLProps<HTMLDivElement>, 'className' | 'onSelect' | 'ref'> {
    className?: string | string[] | {[name: string]: boolean} | undefined;
    defaultFocus?: boolean | undefined;
    defaultIndex?: number | undefined;
    direction?: 'rtl' | 'ltr' | undefined;
    disabledTabClassName?: string | undefined;
    disableUpDownKeys?: boolean | undefined;
    disableLeftRightKeys?: boolean | undefined;
    domRef?: ((node?: HTMLElement) => void) | undefined;
    environment?: Window | undefined;
    focusTabOnClick?: boolean | undefined;
    forceRenderTabPanel?: boolean | undefined;
    onSelect?: ((index: number, last: number, event: Event) => boolean | void) | undefined;
    selectedIndex?: number | undefined;
    selectedTabClassName?: string | undefined;
    selectedTabPanelClassName?: string | undefined;
  }

  export interface TabListProps extends Omit<HTMLProps<HTMLUListElement>, 'className'> {
    className?: string | string[] | {[name: string]: boolean} | undefined;
  }

  export interface TabProps extends Omit<HTMLProps<HTMLLIElement>, 'className' | 'tabIndex'> {
    className?: string | string[] | {[name: string]: boolean} | undefined;
    disabled?: boolean | undefined;
    disabledClassName?: string | undefined;
    selectedClassName?: string | undefined;
    tabIndex?: string | undefined;
  }

  export interface TabPanelProps extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
    className?: string | string[] | {[name: string]: boolean} | undefined;
    forceRender?: boolean | undefined;
    selectedClassName?: string | undefined;
  }

  export interface ReactTabsFunctionComponent<P = {}> extends FunctionComponent<P> {
    tabsRole: 'Tabs' | 'TabList' | 'Tab' | 'TabPanel';
  }

  export const Tabs: FunctionComponent<TabsProps>;
  export const TabList: FunctionComponent<TabListProps>;
  export const Tab: FunctionComponent<TabProps>;
  export const TabPanel: FunctionComponent<TabPanelProps>;
}

[danez]

I just release 4.3.0 that includes the typescript typings. Let me know if that helps.