Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React typescript typings not working

After installing via typings I get the below error in terminal

Terminal error

error TS2320: Interface 'Element' cannot simultaneously extend types 'ReactElement<any>' and 'ReactElement<any>'.
  Named property 'type' of types 'ReactElement<any>' and 'ReactElement<any>' are not identical.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/typings/globals/react/index.d.ts
(2375,5): error TS1036: Statements are not allowed in ambient contexts.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/typings/globals/react-dom/index.d.ts
(69,5): error TS2309: An export assignment cannot be used in a module with other exported elements.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/node_modules/@types/react-dom/index.d.ts
(19,31): error TS2315: Type 'DOMAttributes' is not generic.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/node_modules/@types/react-dom/index.d.ts
(44,60): error TS2315: Type 'DOMAttributes' is not generic.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/node_modules/@types/react/index.d.ts
(2368,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'a' must be of type 'HTMLProps<HTMLAnchorElement>', but here has type 'HTMLProps<HTMLAnchorElement>'.

ERROR in /Users/ajvivek/Dev/ES6/motionize-code/node_modules/@types/react/index.d.ts
(2369,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'abbr' must be of type 'HTMLProps<HTMLElement>', but here has type 'HTMLProps<HTMLElement>'.

index.d.ts /// <reference path="globals/react/index.d.ts" /> /// <reference path="globals/react-dom/index.d.ts" />

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "es5",
    "jsx": "react"
  },
  "files": [
    "./app/app.tsx",
    "./app/Hello.tsx",
    "typings/index.d.ts"
  ],
  "exclude": [
      "node_modules"
  ]
}

I have followed the documentation provided in https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Not sure what I have missed?

Is anyone facing this issue?

like image 471
Ajain Vivek Avatar asked Oct 12 '16 07:10

Ajain Vivek


People also ask

Does TypeScript work with React?

Create React App supports TypeScript out of the box. You can also add it to an existing Create React App project, as documented here.

How do you implement TypeScript in React?

To install TypeScript with create-react-app , run the following one-liner in your terminal: npx create-react-app . The command above will create a simple folder structure for your application, then install all the necessary modules and get your project up and running for you.

What is TSX in React?

tsx . This is the extension that you should use anytime you include the JSX syntax in a React component file. You also need the jsx set to true which is done by default. TypeScript is able to compile JSX directly into JavaScript. For more information, you can review the TypeScript docs on JSX.


2 Answers

I figured out the issue finally.

I went on to install types once via tsd and then typings that led to duplicate typings.

Deleted the @types folder to resolve my issue.

like image 164
Ajain Vivek Avatar answered Oct 07 '22 23:10

Ajain Vivek


Just in case anyone else stumbles into this, I also got this error when there was a mismatch between my @types/react and @types/react-dom packages. I ended up just deleting the @types/react entry in my package.json since it's automatically included by @types/react-dom.

like image 12
Christopher Davies Avatar answered Oct 07 '22 23:10

Christopher Davies