Source maps broken since "redbox-react"

[jthomaschewski]

Since commit ecc7518 source maps seems to be broken

The nice big red error stacktrace is shown but every class name gets "ProxyClass", line numbers are wrong and the Chrome inspector does only show the bundled file names.

With the previous commit 9e6a666 the big red error stacktrace is gone but Chrome shows correct filenames and line numbers (I intentionally broke App.jsx on line 27)

[AdamBrodzinski]

Hmmm that's weird. I wonder if changing devTool source maps to 'source-maps' here. I'll try to look into this over the weekend.

It looks like redbox has a few issues on their repo, delicate-error-reporter might be a bit more stable?

[jthomaschewski]

Wow, quick response :)
I've tried both of your suggestions:

"source-maps" and "eval" in "devtool" setting didn't change anything but maybe there was still some cached sourcemap active or something like that.

delicate-error-reporter looks nice but the stack trace and inspector log does look the same as with redbox

Thanks for looking into this

[AdamBrodzinski]

No prob 😄

I thought I remember that some of the babel transforms work by wrapping classes... i'm wondering if all the error reporters do this? I guess they would have to wrap everything with a try/catch or something to snatch up the errors.

At any rate I think if you remove the 2nd item in the react-transform array that should take it back to normal.

    // removing this:
     {
        "target": "react-transform-catch-errors",
        // the second import is the React component to render error
        // (it can be a local path too, like "./src/ErrorReporter")
        "imports": ["react", "redbox-react"]
      }

[AdamBrodzinski]

Ok now i'm more confused.... I fired up my fork of webpack (commit ecc7518) and it's working for me. Perhaps it's some kind of caching issue? I know i've seen what you've mentioned though.

Here's what I have with a debugger and showing a 'paused on caught exception' showing vim line number and sourcemap:

This may shed some light? perhaps adding the retainLines in .babelrc would help?

webpack-contrib/transform-loader#9
https://github.com/thaiat/webpack-babel-sourcemap

[jedwards1211]

Yeah, this caught me off guard too. ProxyClass is obviously from react-redbox, hence the tryRender method...but I'm not sure what to think yet. I haven't seen this issue in my projects yet...

[jedwards1211]

Okay, I was able to reproduce in the latest version of this poject, with source-map also...

[jedwards1211]

Without react-redbox and source-map, I was able to put breakpoints in App.jsx. I wonder if react-redbox messes up the source maps?

[AdamBrodzinski]

Yea this is breaking for me too... I thought it was a problem with the debugger lines... I need some sleep 😆

[gaearon]

Oh wait, are you all folks using React.createClass() :-) ?

Then you'll need to put react-display-name Babel plugin before react-transform as shown here.
Sorry it wasn't in the docs!

[gaearon]

Or wait, I'm missing the point again. The issue is about filenames, not about ProxyClass. Or is about both? These are unrelated issues. You can fix ProxyClass by babel-react-display-name as I wrote in the previous comment, but this is unrelated to sourcemaps.

[jedwards1211]

Ah, cool, thanks @gaearon! I'll close my issue once I've verified that fixes it. Yes, we're still in the dark ages here :) I haven't investigated a way to use the MeteorDataMixin with React.Component classes yet.

[jedwards1211]

@gaearon I've spent the past hour or two investigating the source map issue, and I'm still not sure what it is. I can't repro by altering react-transform-boilerplate yet. I'm using webpack-dev-server instead of a custom server.js with webpack middleware, so maybe that's the problem.

[gaearon]

Let me take a look too.