Lots of TypeScript compilation errors when running webpack server

[perlun]

Checking this repo out, but I am having some issues with it. Any ideas? (I just cloned the repo and did a yarn install.) Could be #12 but I'm unsure...

$ npm run-script start

> [email protected] start /Volumes/extra/git/3rd-party/react-hot-ts
> webpack-dev-server

Project is running at http://localhost:8080/
webpack output is served from /

[at-loader] Using [email protected] from typescript and "tsconfig.json" from /Volumes/extra/git/3rd-party/react-hot-ts/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 174 errors
Hash: e68bb4bcf4aada26f5a8
Version: webpack 2.7.0
Time: 3813ms
        Asset       Size  Chunks                    Chunk Names
    bundle.js     1.3 MB       0  [emitted]  [big]  main
bundle.js.map    1.51 MB       0  [emitted]         main
   index.html  341 bytes          [emitted]
chunk    {0} bundle.js, bundle.js.map (main) 1.18 MB [entry] [rendered]
 [./node_modules/react-hot-loader/lib/patch.js] ./~/react-hot-loader/lib/patch.js 209 bytes {0} [built]
 [./node_modules/react-hot-loader/patch.js] ./~/react-hot-loader/patch.js 40 bytes {0} [built]
 [./node_modules/react/react.js] ./~/react/react.js 56 bytes {0} [built]
 [./node_modules/strip-ansi/index.js] ./~/strip-ansi/index.js 161 bytes {0} [built]
 [./node_modules/url/url.js] ./~/url/url.js 23.3 kB {0} [built]
 [./node_modules/webpack-dev-server/client/index.js?http:/localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
 [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
 [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
    [0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/index.tsx 64 bytes {0} [built]
 [./node_modules/webpack/hot ^\.\/log$] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
 [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
 [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {0} [built]
 [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
 [./src/App.tsx] ./src/App.tsx 2.56 kB {0} [built]
 [./src/index.tsx] ./src/index.tsx 1.65 kB {0} [built]
     + 362 hidden modules

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3542:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3543:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3544:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3545:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'area' must be of type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>', but here has type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3546:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'article' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3547:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'aside' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3548:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'audio' must be of type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>', but here has type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3549:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'b' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3550:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'base' must be of type 'DetailedHTMLProps<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>', but here has type 'DetailedHTMLProps<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3551:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'bdi' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3552:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'bdo' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3553:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'big' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3554:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'blockquote' must be of type 'DetailedHTMLProps<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3555:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'body' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3556:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'br' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLBRElement>, HTMLBRElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLBRElement>, HTMLBRElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3557:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'button' must be of type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>', but here has type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.

ERROR in [at-loader] ./node_modules/@types/react-hot-loader/node_modules/@types/react/index.d.ts:3558:13
    TS2403: Subsequent variable declarations must have the same type.  Variable 'canvas' must be of type 'DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>', but here has type 'DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>'.

[...more similar errors]

[Glavin001]

Looks like @types/react has been updated and broke something again...

Pull Requests welcome!

[perlun]

Pull Requests welcome!

Sure. Where should the debugging start, is it a matter of incompatible dependencies or what do you think?

[Glavin001]

It is definitely incompatible @types dependencies 👎 .

I would first check package.json, see if there are any more worthwhile updates (react, react-hot-loader, etc). After all up-to-date, check for errors again.
Look for GitHub issues which demonstrate any errors. I often find a comment like "Hey! Version X of dependency Y does not work with version A of dependency B! Downgrade dependency Y to version Z to fix! 💥 🎆 ". 🙄
In some cases, it may be a TypeScript update itself and we need to update dependencies and potentially make changes in our code, too.