Perf is undefined - application-application works with webpack-dev-server

Question

I am trying to measure the reaction using Perf addon , but when I try to run Perf.start () in my console I get the error: Uncaught ReferenceError: Perf is not defined(…)

It is worth mentioning that I installed the plugin via npm and I have require('react-addons-perf') sitting in my main.js.

I have an assumption that this problem is due to the fact that I am running a webpack-dev server and a global variable that does not display properly, but, unfortunately, does not have a clue how to properly approach it. Can anyone help me with this?

Here webpack.config file contents for codepen for reference.

Answer 1

I don't know if there could be changes in your webpack.config file that could change the scope or provide var for access through the global scope, but one quick way would be to simply use

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

This should give you access through the console.

But it must be said that it may not be intended to expose global global variables to global variables in requireJS

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

Answer 2

Found a solution that worked for me:

• Install npm exose-loader module

• Add the following line to your webpack configuration loaders:

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

This exposure loader module is a great way to export the export of modules to the global area.