gaearon / gaearon/react-hot-loader

example/typescript not working

Open
#998 5 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.