0

I use async/await extensively in my codebase. However, Webpack's sourcemaps don't work well with async/await, or generators in general. Babel transpiles async/await by generating multiple lines of code separated by semi-colons, but not newlines. However, the lines are considered one line by Webpack when generating sourcemaps (since they're not separated by newlines). When I go to that line in my debugger, it's unclear which part of the code the debugger is paused at.

For example, here's a bit of my code:

  async fn() {
    ...
    this.links = this.links.concat(newLinks);
  }

And Babel's output:

...
this.links = this.links.concat(newLinks);case 24:case 'end':return _context.stop();}}}, _callee, this, [[5, 14]]);}));

Since the debugger treats all of this as one line, the whole line is highlighted whenever the debugger pauses on any part of this line.

Is there a way to format Babel's output before Webpack generates a sourcemap for it? I want to insert newlines after each semicolon. This way, the code above would be split into multiple lines, and it'll be clearer which part of the code the debugger is paused at.

Edit:

My .babelrc:

{
    "presets": [
        "es2015",
        "stage-0",
        "react"
    ],
    "plugins": ["transform-decorators-legacy"],
    "retainLines": true
}
Leo Jiang
  • 24,497
  • 49
  • 154
  • 284
  • What is your Babel config like? Do you get any messaged in your console when you build your webpack bundle? Babel shouldn't put them all on one line unless it's a really huge file, or if you manually tell it to. – loganfsmyth Feb 25 '17 at 19:20
  • I clarified the question by adding the input. The code on one line was all generated by Babel's regenerator, I didn't type the `case` stuff. I added my .babelrc in the question. – Leo Jiang Feb 26 '17 at 04:51
  • It is your usage of `retainLines` that is causing this to all jam on one line. – loganfsmyth Feb 26 '17 at 05:21

0 Answers0