How to fix this Syntax Error in my React App?-CodePudding

i want to deploy my React app to github, i run this command:

npm run deploy

but i keep getting this error message:

Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (3:4)

  1 | const reportWebVitals = onPerfEntry => {
  2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
> 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
    |     ^
  4 |       getCLS(onPerfEntry);
  5 |       getFID(onPerfEntry);
  6 |       getFCP(onPerfEntry);

can you help me solve this problem please?

CodePudding user response：

it already tells you what the error is

'import' and 'export' may only appear at the top level

what you can do:

import {getLCP, getFID, getCLS} from 'web-vitals';

getLCP.then(...your code)

CodePudding user response：

You have to import the functions/methods at the top of the file and then use it.

import {getCLS, getFID, getLCP} from 'web-vitals';

You can read docs here

and then use as

const reportWebVitals = (onPerfEntry) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    getCLS(onPerfEntry);
    getFID(onPerfEntry);
    getFCP(onPerfEntry);
  }
};