React - Subsequent variable declarations must have the same type

Question

When I try and run webpack in my React application I get

I get this error 58 times for different variables. I tried removing the @types directory and I get the following error:

How can this be fixed without adding @types/react back into the project, since that was causing the 58 errors before?

I also tried changing all the 'SVGProps' to a different name 'SVGPropss' inside @types/react/index.d.ts and had no luck

Answer 1

One possibility is that you have other dependencies which either depend on an older version of @types/react or yarn/npm has decided they should be using an older version.

For example: @types/react-dom depends on @types/react. When I encountered this problem, I had just manually changed the version number for @types/react and rerun yarn install. Yarn happily installed the new version of @types/react to my node_modules/@types/ directory, but it also installed the version I was using to all the other modules which depended on @types/react. So I ended up with a directory tree like

node_modules
+-- @types
|   +-- react // 16.0.2
|   +-- react-dom
|   |   |   +-- node_modules
|   |   |   +-- @types
|   |   |   |   +-- react // 15.0.35

You can quickly scan your ./node_modules/@types/ directories and see if they themselves have a sub-directory of node_modules/@types/react. If so, this is likely where you duplicate resides.

The way I fixed this was to run

> yarn outdated
> yarn upgrade

outdated | upgrade

or

> npm outdated
> npm upgrade

outdated | upgrade

If you do not actually wish to upgrade all of the modules output by outdated you can give only the modules you want to update as arguments to upgrade. I suspect you could simply run

yarn upgrade @types/react

and fix the problem completely but I haven't tested that.

Answer 2

You can see all versions of react/react-dom and @types/react/@types/react-dom that are installed using yarn list --pattern "react".

For me, it looked like:

yarn list v1.3.2 ├─ @jupyterlab/[email protected] │ ├─ @types/[email protected] │ ├─ [email protected] │ └─ [email protected] ├─ @jupyterlab/[email protected] │ └─ [email protected] ├─ @types/[email protected] │ └─ @types/[email protected] ├─ @types/[email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] ├─ [email protected] └─ [email protected]

You can use yarn's resolutions feature to resolve specific dependencies to the same version. Add the following to your package.json:

"resolutions": { "@types/react": "16.0.34", "@types/react-dom": "16.0.3", "react": "~16.2.0", "react-dom": "~16.2.0" }

This resolved the "Subsequent variable declarations must have the same type " error for me.