React-hot-loader: React DevTools `Show Source` is not working

[simongong]

I tried to view source of component in React Panel

But it ended up with somewhere in makeAssimilatePrototype.js

module.exports = function makeAssimilatePrototype() {
  var storedPrototype,
      knownPrototypes = [];

  function wrapMethod(key) {
    return function () {
      if (storedPrototype[key]) {
        return storedPrototype[key].apply(this, arguments);
      }
    };
  }

[gaearon]

@jaredly, is there any way I can tell React DevTools to look at a different function? Right now it points to the proxied method, but I can set something like __originalMethod on the proxy if we can come up with a convention you're happy with.

[jaredly]

Yeah, that sounds reasonable. Here's the code for jumping to a function's source (it uses the chrome console api fn inspect that jumps you to any function's source).
If it's an es6 class then I jump to the constructor, otherwise I jump to the render fn.

I imagine the constructor doesn't get proxied, right? So the only change would be for the render function?

[gaearon]

@jaredly The constructor is proxied too. Never mind React Hot Loader though—it's deprecated and the new proxying mechanism is in React Proxy. I'm proxying both constructor and all prototype methods there.

[gaearon]

I can’t repro this with React Hot Loader 3 so it somehow got fixed.
¯_(ツ)_/¯

[Bnaya]

I'm having this issue on v4.3.12 and i think with all 4.x
/cc @theKashey

[theKashey]

Yeah, lets reopen this.
https://github.com/facebook/react-devtools/pull/1191

[theKashey]

Fixed in 4.5.0 (beta) - https://github.com/gaearon/react-hot-loader#setconfigconfig

[Bnaya]

@theKashey Thanks!
Which config should make it work?
what i have:
alias: isHot ? { "react-dom": "@hot-loader/react-dom" } : {},
and i have the console message that its up and runnint.

And:

import { setConfig } from "react-hot-loader";

// https://github.com/gaearon/react-hot-loader#setconfigconfig
setConfig({
  logLevel: "warning",
});

And the babel transformer plugin:

      plugins: isHot ? ["react-hot-loader/babel"] : [],

react-hot-loader@^4.6.3:
  version "4.6.3"

[theKashey]

@Bnaya - you need setConfig({pureRender: true});

[Bnaya]

I tried to understand what that means, and how it will effect me and i didn't manage to understand :(

[theKashey]

@Bnaya - https://github.com/gaearon/react-hot-loader#-hot-labs-

import { setConfig } from 'react-hot-loader'

setConfig({
  pureRender: true, // RHL will not change render method
})

[Bnaya]

i read the docs, but i just don't know what that means
if there will be a minimal example of what it do will be great

[theKashey]

The problem with DevTools was in shadowing .render, and the option you yet have to manually enable - the solution.

[Bnaya]

yes, but why its not on by default?
What is the effect on RHMR?

[theKashey]

It was an experimental option. There are a few tests, which goes red with this option enabled.