PersistGate missing declarations - TypeScript

[avxkim]

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?

[EzraBerendsen]

Where do you declare declare module 'redux-persist/integration/react'; ?

[Erbenos]

Adding "./node_modules/redux-persist/types" to tsconfig.json under compilerOptions->typeRoots makes intellisense work.

Nevermind, after including it, ts cries in depair:

ERROR in undefined(undefined,undefined):
TS2688: Cannot find type definition file for 'integration'.
ERROR in undefined(undefined,undefined):
TS2688: Cannot find type definition file for 'stateReconciler'.
ERROR in undefined(undefined,undefined):
TS2688: Cannot find type definition file for 'tests'.
``

[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';

[olsnacky]

The only way I could get this to work was to import something else from redux-persist.

[katsimoto]

As a temporary workaround, you can add to tsconfig.json:

  "include": ["./node_modules/redux-persist/types"]

[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

[newtmex]

The only way I could get this to work was to import something else from redux-persist.

Worked for me...

[TungNguyen12]

As a temporary workaround, you can add to tsconfig.json:

  "include": ["./node_modules/redux-persist/types"]

it worked, thank you bro

[saulojoab]

Anyone who's also facing this, I solved it by adding redux-persist to my types object in tsconfig.json:

"types": ["react-native", "jest", "redux-persist"],