Search code examples
reactjstypescriptreact-reduxtscreact-dom

Duplicate Types error when using react, reactdom and react-redux types together


So I am trying to use react-redux with typescript. This is what my package.json looks like

"dependencies": {
        "@types/react-dom": "15.5.0",
        "@types/react": "15.0.4",
        "@types/react-redux": "4.4.39",
        "axios": "0.16.2",
        "react": "15.0.0",
        "react-dom": "15.0.0",
        "redux": "3.6.0",
        "react-redux": "5.0.6",
        "redux-thunk": "2.1.0",
        "office-ui-fabric-react": "1.0.0"
    }

Now when I do yarn install. I see multiple react types get installed. Once for @types/React. One for @types/React-redux and @types/react-dom inside each of its own node_modules folder. And the version of the types these modules install internally are very different as I see in my yarn.lock file.

When I try to compile this, I get the errors like
error TS2304: Cannot find name 'DetailedHTMLFactory'.
Subsequent variable declarations must have the same type

The error disappears if I duplicate all the nested @types and just keep teh top level @types/react. Whats a better way to do this, so that duplicate types issue doesn't appear ?


Solution

  • So I finally fixed this by excluding node_modules folder.

    Put "node_modules" in the "exclude" section of tsconfig.json .