React + antd TS2694: Namespace 'React' has no exported member

Question

I'm trying to add the antd library to a React project generated from Visual Studio 2017 (15.2.2).

I started from the project template "ASP.NET Core Web Application" and after chose "React.js" in the below window.

At this point everything works fine.

If I add antd in package.json ("antd": "3.1.0") and I add an import in some tsx file, for example home.tsx like this:

import { Row } from 'antd';

I get 3 errors:

ERROR in [at-loader] ./node_modules/antd/lib/badge/ScrollNumber.d.ts:28:56 TS2694: Namespace 'React' has no exported member 'DetailedReactHTMLElement'.

ERROR in [at-loader] ./node_modules/antd/lib/badge/ScrollNumber.d.ts:38:52 TS2694: Namespace 'React' has no exported member 'DetailedReactHTMLElement'.

ERROR in [at-loader] ./node_modules/antd/lib/input/TextArea.d.ts:15:47 TS2694: Namespace 'React' has no exported member 'TextareaHTMLAttributes'.

How can I fix these errors?

I have tried to update all packages but I still get the same errors ... I have some others projects with both React and antd, that are not based on the React.js template provided by Visual Studio 2017, and I don't have any errors.

Thank you for your help!

Answer 1

The easiest way to solve this is to upgrade your "typescript" package and all your React related packages (includes @types/react-*) except "react-hot-loader" (only upgrade it to latest ^3) to their latest major version.

If you still have problems, delete node_modules, yarn.lock, npm-shrinkwrap.json and wwwroot/dist then retry.

Answer 2

It looks like the antd library has a peer dependency of react >= 16, but, like you said, Visual Studio 2017 generates a repo with react version 15.2.2.

One solution would be to change your react (really your @types/react, but you should change both) dependency to the latest version, which as of right now is 16.3.2. This is what @Zack suggests and would probably be the better solution. Keep in mind that if you're going to upgrade the react version number, you should probably also upgrade the react-dom version and the @types/react-dom version.

Alternatively, if you wanted to keep Visual Studio's output as-is, you could use the last version of antd that supports react v15, which is antd version 2.13.11. To install this, run npm install [email protected]. The disadvantage of this is that you wouldn't be able to use any other packages that depend on react v16.