Webpack-dev-server: Garbledeygook in console

Created on 2 Sep 2017  路  12Comments  路  Source: webpack/webpack-dev-server

Do you want to request a feature or report a bug?
I would classify this as a bug, but I don't know it might be a question. I asked on the gitter, but no one responded.

What is the current behavior?
I get this output when there's an error on the console in the web browser. It works fine on the terminal though. Not sure if this is a webpack bug then or not, who knows.

Does anyone know how I can stop webpack from outputting garbledy gook like this?
  10 | 
 11 | export default function SVG() {
> 12 |  return <div id="svg-container" <svg class="circle" xmlns="http://www.w3.org/2000/svg">
 |  ^
 13 |  <circle
 14 |  cx="50"
 15 |  cy="50"
I'm using webpack and react and babel, so, I don't know which package is responsible or which one can fix it.
If the current behavior is a bug, please provide the steps to reproduce.
clone my repo https://github.com/zwhitchcox/webpack-react-starter

Then, make any error in the react code. I'm assuming you guys know react. For example, a malformed jsx closing tag like

/div>. Then, open http://localhost:4000, and open the console, and you get garbledeygook:

  10 | 
 11 | export default function SVG() {
> 12 |  return <div id="svg-container" <svg class="circle" xmlns="http://www.w3.org/2000/svg">
 |  ^
 13 |  <circle
 14 |  cx="50"
 15 |  cy="50"

What is the expected behavior?
I would expect the output to be cleanly shown like in the terminal:
ERROR in ./src/app.js
Module build failed: SyntaxError: Unterminated JSX contents (30:14)

28 |
29 |

30 | render(, document.querySelector('#app'))
| ^
31 |

Please mention your webpack and Operating System version.

webpack 3.5.5, Ubuntu 14.04

question
Source
picture zwhitchcox

Most helpful comment

This is not an issue with the webpack

Check this issue here #893 that I've created on babel repo with steps to reproduce.

@zwhitchcox @swrobel

picture neilveil on 3 Mar 2021
👍3

All 12 comments

The console you're using doesn't support ansi color codes or is flipping out for some weird reason. Especially strange on Ubuntu. If that's being output in the browser console, then that's an entirely different issue - something I've never seen a single test or example do. That's going to be an issue with your environment or app setup I'm afraid. To triage an app, start with one of our known-working examples and slowly add bits of your config/app until it errors, and that should show you the trouble maker.

Closing as a question.

shellscape picture shellscape on 2 Sep 2017

But that can't be right, because it works when I run webpack-dev-server from the command line, and that gets run on the same environment. I haven't been able to find an react example with the webpack-dev-server node api

zwhitchcox picture zwhitchcox on 2 Sep 2017

Clues to debug your particular issue can be found in the gobbly goop...

"http://www.w3.org/2000/svg"

"svg-container"

I'd start there within your project. You don't need a react example to start piecing together a reproducible environment. Start with the node-api example and build it up piece by piece until your issue is replicated, and that'll probably give you the cause.

shellscape picture shellscape on 2 Sep 2017

I've verified that it does the same thing on other machines, so if you were to clone the repo, it would even do it on your machine. Again, it only does it with the node api, not from command line. the "http://www.w3.org/2000/svg" is just the jsx I was using. If I made a different error in the jsx, it would output that.

zwhitchcox picture zwhitchcox on 2 Sep 2017

Ok, I went ahead and copied the webpack-dev-server node-api example, and the only thing I changed was to add the babel-preset-react to it, and it outputs the garbly gook. https://github.com/zwhitchcox/webpack-dev-server-bug

So, the webpack-dev-server from the command line works, fine and only outputs the garbldy gook with the node api. Is this the intended behavior? It doesn't seem like very good design. If this is a bug, will you please reopen this issue.

zwhitchcox picture zwhitchcox on 2 Sep 2017

I think this issue still exists, even if it was described poorly here. The issue is that when WDS triggers a browser reload and the build fails, the error is output to the browser console (as expected) with the ANSI color codes included (not expected), resulting in the aforementioned "Garbledeygook". Screenshots for clarity:

Terminal output (looks great):
Screen Shot 2019-08-02 at 11 49 26 AM

Chrome console:
Screen Shot 2019-08-02 at 11 49 42 AM

webpack: 4.36.1
webpack-dev-server: 3.7.2

swrobel picture swrobel on 2 Aug 2019
👍2 👎1

@swrobel How to resolve this issue?

neilveil picture neilveil on 2 Mar 2021
👎1 👍1

@neilveil I submitted a PR that fixes it, but it got rejected. #1066 You can use the code from that though.

zwhitchcox picture zwhitchcox on 2 Mar 2021

People on this repo aren't the friendliest unfortunately :(

zwhitchcox picture zwhitchcox on 2 Mar 2021

@neilveil If you're using react, feel free to clone my template repo which proxies a connection to the create-react-app dev server.

https://github.com/zwhitchcox/ref-express-react

They're pretty much worked out all the kinks. I think this issue still crops up though.

zwhitchcox picture zwhitchcox on 2 Mar 2021

Please provide reproducible test repo, I will look at the problem

alexander-akait picture alexander-akait on 2 Mar 2021

This is not an issue with the webpack

Check this issue here #893 that I've created on babel repo with steps to reproduce.

@zwhitchcox @swrobel

neilveil picture neilveil on 3 Mar 2021
👍3
Was this page helpful?
0 / 5 - 0 ratings

Related issues

daryn-k picture daryn-k  路  3Comments
Ky6uk picture Ky6uk  路  3Comments
subblue picture subblue  路  3Comments
mrdulin picture mrdulin  路  3Comments
Jack-Works picture Jack-Works  路  3Comments