PersistGate missing declarations - TypeScript

import { PersistGate } from 'redux-persist/integration/react';

Throws an error “TS7016: Could not find a declaration file for module ‘redux-persist/integration/react’.”

Version:

"redux-persist": "^6.0.0"

Currently using:

declare module 'redux-persist/integration/react'; as workaround. Do you plan to add typings for this?

[megagreg72]

To elaborate on the workaround mentioned by @webcoderkz , in general, when you don’t have Typescript typings you can define your own in a file like declarations.d.ts . This general strategy is described here as “Plan C”. https://medium.com/@steveruiz/using-a-javascript-library-without-type-declarations-in-a-typescript-project-3643490015f3

In this case, the typings are in node_modules/redux-persist/types/integration/react.d.ts , but for some reason the compiler seems to have some difficulty finding the typings when you specify the path normally, like

import { PersistGate } from 'redux-persist/integration/react';

So, you can simply copy the typings from react.d.ts to somewhere easier for the compiler to find, like your own declarations.d.ts . It seemed to work for me when I just copied this part

declare module "redux-persist/integration/react" {
  import { ReactNode, PureComponent } from "react";
  import { Persistor } from "redux-persist/es/types";

  /** @see PersistGate */
  interface PersistGateProps {
    persistor: Persistor;
    onBeforeLift?(): void | Promise<void>;
    children?: ReactNode | ((bootstrapped: boolean) => ReactNode);
    loading?: ReactNode;
  }

  /** @see PersistGate */
  interface PersistorGateState {
    bootstrapped: boolean;
  }

  /**
   * Entry point of your react application to allow it persist a given store @see Persistor and its configuration.
   * @see Persistor
   * @see PersistGateProps
   * @see PersistGateState
   */
  class PersistGate extends React.PureComponent<PersistGateProps, PersistorGateState> {}
}

Another alternative workaround seems to be to import anything else from redux-persist ( not redux-persist/lib or redux-persist/integration ), such as

import { persistReducer } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';

This seems to make the compiler search redux-persist properly, so that it also finds redux-persist/integration/react . This even seems to work when the import from redux-persist is not in the same file as the import from redux-persist/integration/react . I’m not sure if compiler settings matter, but FWIW I am using VSCode and Babel, with this tsconfig.json :

{
  "compilerOptions": {
    "outDir": "build",
    "noEmit": true, // let babel output instead
    "sourceMap": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "types": ["node", "jest"]
  },
  "include": ["src"]
}

TLDR;

import { something } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';

[maurocolella]

@katsimoto your tip set me on the right track, thank you for that, but the files property seems better for that.

  "exclude": ["node_modules"],
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ],
  "files": [
    "./node_modules/redux-persist/types/integration/react.d.ts"
  ]

Files included using “include” can be filtered using the “exclude” property. However, files included explicitly using the “files” property are always included regardless of “exclude”. The “exclude” property defaults to excluding the node_modules, bower_components, jspm_packages and directories when not specified. (http://www.typescriptlang.org/docs/handbook/tsconfig-json.html#details)

From this discussion: https://github.com/Microsoft/TypeScript/issues/17228