'reportWebVitals' is not defined

user_8153505 0
Viewed 19244

By this section, create-react-app said:

By default, Create React App includes a performance relayer that allows you to measure and analyze the performance of your application using different metrics.

To measure any of the supported metrics, you only need to pass a function into the reportWebVitals function in index.js:

reportWebVitals(console.log);

This function is fired when the final values for any of the metrics have finished calculating on the page. You can use it to log any of the results to the console or send to a particular endpoint.

However, when i add above line of code into index.js, i got an error:

'reportWebVitals' is not defined

My index.js source:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <Provider>
    <App/>
  </Provider>,
  document.getElementById('root')
);

reportWebVitals(console.log);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit .ly/CRA-PWA
serviceWorker.unregister();
create-react-app
3 Answers

I've found that reportWebVitals is exist in new version of create-react-app (4.0.0). So in order to use reportWebVitals, I've create new create-react-app and copy reportWebVitals.js into my project and it worked.

user_81535050

Try to import the below package in your index file:

import reportWebVitals from './reportWebVitals';
user_102876440 
import reportWebVitals from "./reportWebVitals";

Even after importing you get the same error read the below

reportWebVitals is a javascript function that is introduced for measuring the performance of our app.

To avoid this issue create a new react app by using this command

npx create-react-app my-app

copy and paste reportWebvitals.js and setupTests.js both files into your old react project

user_176958380
Related