Next.js: Sourcemaps broken in simplest example

[tmcw]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I'd expect sourcemaps of a basic module to enable breakpoint selection on all lines, except those clearly represented differently through transpilation.

Current Behavior

A basic component is not debuggable with sourcemaps: clicking on a line to set a breakpoint does not set a breakpoint at that line.

Steps to Reproduce (for bugs)

1. Example: https://github.com/tmcw/next-sourcemap-breakage-example

Single page with the source:

import {Component} from "react";
export default class Button extends Component {
  render() {
    function foo() {
      console.log(1);
    }
    return <button onClick={foo}>hi</button>
  }
};

Setting a breakpoint on the line

      console.log(1);

Is not possible:

Context

This makes debugging applications quite difficult.

Your Environment

| Tech | Version |
|---------|---------|
| next | 3.2.2 |
| node | 8.4.0 |
| OS | macOS 10.12.6 |
| browser | Google Chrome 61.0.3163.100 |

[timneutkens]

cc @kpdecker since you updated the sourcemaps 👌

[ckeeney]

I have this problem too and I'm surprised more developers are not complaining about this issue. Is there a workaround for this?

[tmcw]

I've updated the testcase repository to React v0.16.x and Next.js ^4.0.3, and can confirm the issue persists in the updated versions.

[scsper]

I've also seen this issue in our app

[kpdecker]

3121 fixes both the immediate issue here and another where breakpoints were lost in Chrome on every page refresh.

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.