'reportWebVitals' 未定义

Question

作者this section，create-react-app表示：

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.

但是，当我将以上代码行添加到 index.js 时，出现错误：

'reportWebVitals' is not defined

我的 index.js 来源：

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();

Answer 1

我发现 reportWebVitals 存在于 create-react-app (4.0.0) 的新版本中。所以为了使用 reportWebVitals，我创建了新的 create-react-app 并将 reportWebVitals.js 复制到我的项目中并且它起作用了。

Answer 2

尝试在您的索引文件中导入以下包：

import reportWebVitals from './reportWebVitals';

Answer 3

import reportWebVitals from "./reportWebVitals";

即使在导入之后，您也会遇到同样的错误，请阅读以下内容

reportWebVitals 是一个 javascript 函数，用于衡量我们应用程序的性能。

要避免此问题，请使用此命令创建一个新的 React 应用程序

npx create-react-app my-app

将 reportWebvitals.js 和 setupTests.js 两个文件复制并粘贴到您的旧 React 项目中