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

admin管理员组

文章数量:1415137

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.

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.

• javascript
• reactjs
• webpack
• webpack-dev-server

Share Improve this question Follow asked Jan 22, 2016 at 15:06 Gleb KostyuninGleb Kostyunin 3,88322 gold badges2121 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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!

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.

本文标签： javascriptPerf is not definedrunning react app with webpackdevserverStack Overflow