gaearon / gaearon/react-hot-loader
example/typescript not working
- Dominant language
- JavaScript
- Stars
- 12.2k
- Forks
- 775
- PR merge metrics
- No merged PRs in 30d
Description
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(, 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.
```
Contributor guide
Research direction
Start in examples/typescript, especially src/index.tsx, and reproduce the failure with npm start. Compare the example's TypeScript, Babel, and webpack setup with the linked Babel-before-TypeScript guidance, focusing on the JSX parse error. Done means the example compiles and HMR works with ES5 output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, react, typescript, webpack
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100