5

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']
      }
    ]
  }
};
fresh5447
  • 1,242
  • 3
  • 14
  • 27

2 Answers2

4

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.

Pierre Criulanscy
  • 8,726
  • 3
  • 24
  • 38
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),
};
Sergio Flores
  • 5,231
  • 5
  • 37
  • 60
  • Interesting. That did work for warning messages in the console, but it did not work for the React Developer Tools. – fresh5447 Jun 02 '16 at 18:54
  • I'm not sure what can be the problem, check if this helps: https://github.com/facebook/react-devtools/issues/4#issuecomment-31553158 – Sergio Flores Jun 02 '16 at 19:21
  • I ended up going through every single file and giving every single component a display name (seemed tedious.. is there a webpack plugin for this?) and it worked. Thank you! – fresh5447 Jun 03 '16 at 19:24