React Developer Tools says 'Proxy Component' instead of the name of the component

Question

I am using Webpack with Hot Module Reloading. I also use the chrome extension React Developer Tools to inspect the react tree while developing. When I inspect the page and look at the component tree, I would like to see the name of the actual components, however, for every component the name shows up as Proxy Component.

I can let you know more specifics about my Webpack, but I am struggling to even google the right thing to solve this issue.

Here are the tools I am using for webpack:

"webpack": "^1.9.6",
"webpack-dev-middleware": "^1.2.0",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.0.0"

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client',
    './client/index'
  ],
  output: {
    path: path.join(__dirname, 'static'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.join(__dirname, 'client'),
        query: {
          plugins: ['transform-runtime'],
          presets: ['es2015', 'stage-0', 'react', 'react-hmre']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
    ]
  }
};

Answer 1

I think it's because you should have set the node environnement variable to 'production'. In production mode, React renames your components and they are displayed as ProxyComponent in React Developer Tools.

EDIT

Your problem is with the hot module replacement and React Transform. As stated by Dan Abramov himself, when using Hot Reloading for React the components need to be proxied, and the display name of the proxied component is derivated from the displayName of your components. That's why it works when you add an explicit displayName, if you don't, React devtools will fall back to the ProxyComponent module's name : ProxyComponent.

Answer 2

Have you tried to assign the displayName property?

export const Navbar = (props) => {
  let title = null;
  let menu = null;

  return (
    <header className={style.navbar}>
      <Grid>
        <Row>
          <Col xs={12} sm={12} md={12} lg={12}>
            {title}
            {menu}
          </Col>
        </Row>
      </Grid>
    </header>
  );
};

Navbar.displayName = 'Navbar'; // LIKE THIS

Navbar.propTypes = {
  title: PropTypes.string,
  items: PropTypes.arrayOf(PropTypes.node),
};