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?
Create React App supports TypeScript out of the box. You can also add it to an existing Create React App project, as documented here.
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.
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.
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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With