React Developer Tools sagt "Proxy-Komponente" anstelle des Namens der Komponente

Question

Ich verwende Webpack mit Hot Module Reloading. Ich benutze auch die Chrome-Erweiterung React Developer Tools, um den reagierenden Baum während der Entwicklung zu inspizieren. Wenn ich die Seite inspiziere und den Komponentenbaum betrachte, möchte ich den Namen der tatsächlichen Komponenten sehen, aber für jede Komponente erscheint der Name als Proxy Component.

Ich kann Sie mehr Details über meine Webpack informieren, aber ich habe Mühe, Google das richtige Ding, um dieses Problem zu lösen.

Hier sind die Werkzeuge, die ich für webpack bin mit:

"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

Haben Sie die displayName Eigenschaft zuweisen versucht?

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), 
}; 

Answer 2

Ich denke es liegt daran, dass Sie die Node Environment Variable auf 'Produktion' gesetzt haben sollten. Im Produktionsmodus benennt React Ihre Komponenten um und sie werden in React Developer Tools als ProxyComponent angezeigt.

EDIT

Ihr Problem ist mit dem heißen Modulaustausch und Reagieren Transformation. Wie von Dan Abramov selbst angegeben, müssen die Komponenten bei der Verwendung von Hot Reloading für React proxyed werden, und der Anzeigename der Proxy-Komponente wird von displayName Ihrer Komponenten abgeleitet. Deshalb funktioniert es, wenn Sie eine explizite displayName hinzufügen, wenn Sie dies nicht tun, werden React Devtools auf den Modulnamen ProxyComponent zurückgehen: ProxyComponent.