React-profiler: element type is invalid

Question

based on React Docs and this medium article, I did something as simple as this to try profiler in react

import React, { unstable_Profiler as Profiler }  from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {

   logProfile = (id, phase, actualTime, baseTime, startTime, commitTime) => {
    console.log(`${id}'s ${phase} phase:`);
    console.log(`Actual time: ${actualTime}`);
    console.log(`Base time: ${baseTime}`);
    console.log(`Start time: ${startTime}`);
    console.log(`Commit time: ${commitTime}`);
};

render () {
  return (
    <div>
      <Profiler id="app" onRender={this.logProfile}>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
      </Profiler>
      </div>
    );
  }
}

export default App;

but this is throwing following error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

Can someone tell me what I am doing wrong here?

PJCHENder PJCHENder · Accepted Answer · 2020-06-03T09:30:14

I face the same issue and I change the import object from unstable_Profiler to Profiler directly and it works.

// import React, { unstable_Profiler as Profiler }  from 'react';
import React, { Profiler }  from 'react';

const App = () => (
  <div>
    <Profiler>
      <OtherComponents />
    </Profiler>
  </div>
)

I check the test scenario of Profiler here at github.

React-profiler: element type is invalid

1 Answers