example/typescript not working

[crazyx13th]

I invest the hole day to get HMR to work the first time (in the past never found time / allways give up)
It's only working with:

• awesome-typescript-loader
• es6 output

to get es5 you have a I try this inside the docs
https://github.com/gaearon/react-hot-loader#add-babel-before-typescript
and your demo, but both have the same problem (jsx?)

any idea?! very frustrating... THX

Greetings
crazyx13th

Microsoft Windows [Version 10.0.17134.48]
(c) 2018 Microsoft Corporation. Alle Rechte vorbehalten.

C:\workspace\react-hot-loader\examples\typescript>npm start

> hot-typescript@1.0.0 start C:\workspace\react-hot-loader\examples\typescript
> webpack-dev-server --hot

Project is running at http://localhost:8081/
webpack output is served from /
Hash: 0540cd15cb7e05c2c495
Version: webpack 3.12.0
Time: 777ms
     Asset       Size  Chunks                    Chunk Names
 bundle.js     358 kB       0  [emitted]  [big]  main
index.html  182 bytes          [emitted]
[./node_modules/ansi-html/index.js] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[./node_modules/loglevel/lib/loglevel.js] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[./node_modules/webpack/hot ^\.\/log$] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
   [0] multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/index 52 bytes {0} [built]
[./node_modules/sockjs-client/dist/sockjs.js] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built]
[./node_modules/strip-ansi/index.js] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[./node_modules/url/url.js] ./node_modules/url/url.js 23.3 kB {0} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 7.93 kB {0} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 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.31 kB {0} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.04 kB {0} [built]
[./src/index.tsx] ./src/index.tsx 2.53 kB {0} [built] [failed] [1 error]
    + 13 hidden modules

ERROR in ./src/index.tsx
Module build failed: SyntaxError: C:\workspace\react-hot-loader\examples\typescript\src\index.tsx: Unexpected token, expected "</>" (8:12)

  6 | document.body.appendChild(root)
  7 | 
> 8 | render(<App />, root)
    |             ^
  9 | 
    at _class.raise (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:3861:15)
    at _class.unexpected (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5190:16)
    at _class.expectRelational (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5131:12)
    at _class.tsParseTypeAssertion (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:9215:12)
    at _class.parseMaybeUnary (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:10112:21)
    at _class.parseExprOps (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5754:21)
    at _class.parseMaybeConditional (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5726:21)
    at _class.parseMaybeAssign (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5673:21)
    at _class.parseMaybeAssign (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:10099:87)
    at _class.parseExprListItem (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:6935:18)
    at _class.parseCallExpressionArguments (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:6064:22)
    at _class.parseSubscript (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5973:32)
    at _class.parseSubscript (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:9722:51)
    at _class.parseSubscripts (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5888:19)
    at _class.parseExprSubscripts (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5878:17)
    at _class.parseMaybeUnary (C:\workspace\react-hot-loader\examples\typescript\node_modules\@babel\parser\lib\index.js:5847:21)
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/index
Child html-webpack-plugin for "index.html":
     1 asset
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
    [./node_modules/lodash/lodash.js] ./node_modules/lodash/lodash.js 540 kB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.

[crazyx13th]

ok found the popblem... because of the install method you define (this char (I never use this) )

because than he install v49 (see babel/babel#8049)

the best whould be to push a package-lock.json too inside your examples, than everyone have the same versions (submodules too)

solution:

• delete node_modules folder
• just remove all ^ characters from package.json
• replace all beta46 to 47
• npm i

than you have the latest working version 47

{
  "name": "hot-typescript",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "devDependencies": {
    "@babel/core": "7.0.0-beta.47",
    "@babel/plugin-syntax-decorators": "7.0.0-beta.47",
    "@babel/plugin-syntax-jsx": "7.0.0-beta.47",
    "@babel/plugin-syntax-typescript": "7.0.0-beta.47",
    "awesome-typescript-loader": "3.4.1",
    "babel-loader": "8.0.0-beta.2",
    "html-webpack-plugin": "2.30.1",
    "typescript": "2.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },
  "dependencies": {
    "@babel/preset-env": "7.0.0-beta.47",
    "@types/react": "16.0.31",
    "@types/react-dom": "16.0.3",
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-hot-loader": "4.1.2"
  }
}

thx!

Greetings
crazyx13th

[crazyx13th]

ok, sorry my fault... you using yarn (yarn.lock)

[theKashey]

Yeah, babel7 is still beta :(

[crazyx13th]

on friday at the end of the day I was thinking the errors are normal "any-problems" But today I wonder where these errors come from :-/

key?, code? ...

thx!

[theKashey]

it is out magic stuff, and it should not trigger warnings like this.
Currently we are looking to another setup, there ts-check is disabled for "compiler" itself, and running as a separate task - #996