Add syntax error overlay in development #744
Conversation
ghost
added
the
|
I’m bad at CSS so if you have ideas how to make it wrap code better or something, I’m up for it. |
|
Travis seems to fail because of #698. |
|
Nice work! I think it's worth logging just the once when a disconnect happens, with a note to reload after the server is available again?
|
|
Going to get this in. Can fix nits later. 😄 |
|
Making the overlay slightly transparent also gives a sense of depth. As in, "hey, your stuff is here, but you gotta fix this first". Minor and probably subjective, but I have liked it on several projects |
|
👍
@goshakkk We might make it transparent when we support hot reloading for JS, but for now, fixing a syntax error triggers a full refresh anyway, so I think making it transparent might make it annoying (“my stuff is there, why are you refreshing?”) |
| message = lines.join('\n'); | ||
| // Internal stacks are generally useless so we strip them | ||
| message = message.replace( | ||
| /^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '' |
There was a problem hiding this comment.
are node error message internationalized? PHP ones are and this would break with them
There was a problem hiding this comment.
Not as far as I know. At least not yet.
| } | ||
|
|
||
| // https://webpack.github.io/docs/hot-module-replacement.html#check | ||
| module.hot.check(/* autoApply */true, function(err, updatedModules) { |
There was a problem hiding this comment.
inline comment for booleans ftw :)
There was a problem hiding this comment.
Learned this from you!
There was a problem hiding this comment.
Woah this is neat, good tip!
|
I'm trying to merge the create-react-app into a current project so I can use all the build stuff you guys use. I've got a ton of errors from es-lint and other things which i want to gradually get rid of. The app is working behind the iframe, but I'd like it to be optional to have this massive iframe overlay so I can get rid of the errors gradually. Is that possible right now? |
|
You can't do that without ejecting, but presumably you already ejected? Otherwise I'm not sure where lint errors are coming from. We only use lint warnings in CRA lint configuration except for |
|
Hey @gaearon I ejected already to do some extra webpack build config. We've got some global variables being injected by other things, so I changed the Does webpackhotdevclient do the HMR for JS? I wouldn't want to remove it if it does |
You can replace |
I haven’t tried but I think it does if you already handle HMR somewhere in the code. Our CSS hot reloads because |
* Add syntax error overlay in development * Support HMR being disabled * Tweak CSS
Fixes #89.
Fixes #569.
Fully fixes #263 (we don’t log anything now, and don’t try to reconnect).
Some screenshots: