Perf is not defined - running react app with webpack-dev-server

Question

I am trying to measure react performance with Perf addon, but when I'm trying to run Perf.start() in my console i get an error: Uncaught ReferenceError: Perf is not defined(…)

Worth mentioning, that I've installed the plugin through npm and have a require('react-addons-perf') sitting in my main.js file.

I have a guess that this problem related to the fact that i'm running a webpack-dev-server and the global variable is not properly exposed, but unfortunately hav no idea, how to properly approach it. Can anyone help me with that?

Here's my webpack.config file contents on codepen for the reference.

Answer 1

I don't know if there might be changes within your webpack.config that could change the scoping or expose a var to be accessible via the global scope, but one quick way would be to simply use

global.Perf = require('react-addons-perf');

This should grant you access via console.

But one must say that it is maybe not intended to expose vars globally global variables in requireJS

And maybe try to find a way to trigger the Perf.start() and Perf.stop() from within your code, not the console!

Answer 2

Found a solution, that worked for me:

1. Install the npm expose-loader module

2. Add the following line to your webpack config loaders:

   { test: require.resolve("react-addons-perf"), loader: "expose?Perf" }
   

This expose-loader module is a great way to expose module exports to global scope.