CODEWITHSUNDEEP
reactjstypescriptreact-reduxtscreact-dom
Abhik
Abhik

Reputation: 1940

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 ?

Upvotes: 1

Views: 1751

Answers (3)

Abhik
Abhik

Reputation: 1940

So I finally fixed this by excluding node_modules folder.

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

Upvotes: 0

adz5A
adz5A

Reputation: 2032

You should try to remove your node_modules folder, run yarn cache clear and reinstall everything. There is an issue on the typescript repo about this behaviour ( I ran into it recently with one of my side projects ) that i'll try to find and link to this answer.

Upvotes: 0

Knaģis
Knaģis

Reputation: 21485

Since you are using yarn, the easiest direction might be to use resolutions in the package.json file to force specific versions of the typings, see https://github.com/yarnpkg/yarn/pull/4105

Other than that you would have to figure out which specific versions of these typings work with one another. Basically look at @types/react-dom dependency list and then include the same version of @types/react in your project.

Upvotes: 2

Related Questions