14

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?

Ajain Vivek
  • 1,111
  • 1
  • 12
  • 20
  • why you excluding "typings/index.d.ts" ? this is the entry point of all the typings, also you don't need to specify the files section, webpack will auto search the .ts and .tsx in project directory and compile them – abhirathore2006 Oct 12 '16 at 07:25
  • you can always use boilerplate's , just google react typescript boilerplate – abhirathore2006 Oct 12 '16 at 07:27
  • Are you sure you followed the tutorial exactly? It doesn't use typings anymore, whereas your `tsconfig.json` seems to use one. While it's also implicit, it's intended to use TypeScript 2.0. (you also shouldn't need both a 'files' field and an 'exclude' field - one will be ignored). – Daniel Rosenwasser Oct 12 '16 at 07:29
  • @DanielRosenwasser was using typings earlier so stuck to it. typescript version is 2.0.3. I have removed the typescript file from exclude. still the same problem – Ajain Vivek Oct 12 '16 at 07:35
  • @abhirathore2006 the intention was to build the boiler plate with some custom requirement using webpack – Ajain Vivek Oct 12 '16 at 07:36
  • @DanielRosenwasser typings was preferred over tsd https://github.com/DefinitelyTyped/tsd/issues/269 from the thread – Ajain Vivek Oct 12 '16 at 07:41
  • @AjainVivek do you have this repository over github so i can take a look ? – abhirathore2006 Oct 12 '16 at 07:51
  • @abhirathore2006 git repo link https://github.com/ajainvivek/motionize – Ajain Vivek Oct 12 '16 at 08:09
  • @AjainVivek ok, let me check that – abhirathore2006 Oct 12 '16 at 11:29

2 Answers2

13

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.

Ajain Vivek
  • 1,111
  • 1
  • 12
  • 20
  • i have made some changes to make the project work properly, you can provide access to abhirathore2006@gmail.com /abhirathrore2006 so i can push the changes – abhirathore2006 Oct 12 '16 at 11:42
  • @abhirathore2006 you can checkout dev branch and raise PR from your branch to dev. Any help appreciated. Cheers. – Ajain Vivek Oct 12 '16 at 23:03
  • ok, however i checked your master branch, your implementation is quite different, i set it up for pure development and my webpack config also differs – abhirathore2006 Oct 13 '16 at 07:01
  • I've deleted the types folder and got ` TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.` – Basheer Kharoti Oct 23 '17 at 13:52
12

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.

Christopher Davies
  • 4,461
  • 2
  • 34
  • 33