'ReactJS What's wrong 'import' and 'export' may only appear at the top level?

What's wrong in my code react

export const BeritaView = ({ match }) => {
  const article = articles.find(item => item.id === match.params.id);
   console.log(articles, match.params.id);
   return(
      <div>
          <h3> News ID: {match.params.id} </h3>
          <h4> {article.title} </h4>
          <p> {article.content} </p>
          <Link to={`/berita`}> Back to Berita dan Kegiatan </Link>
      </div>
   )  
}

error calls this :

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

Can anyone help me?

javascript reactjs

Solution 1:^[1]

You get this error mostly when you miss a closing bracket in your react code.

Solution 2:^[2]

ES6 Modules are static. This means that export / import can not appear inside functions, conditional statements or contain variables. This is mostly for efficiency reasons.

The error means that you have nested somewhere your export - probably inside a function.

The static structure is enforced syntactically by modules being allowed top-level only, never nested. Implications are that the code structure is known at compile time which allows for dead code elimination, slimmer bundle size and faster lookups.

I recommend reading this.

Solution 3:^[3]

Most of the time I encounter this error and this happens when you miss a bracket.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	gauthams 360

'ReactJS What's wrong 'import' and 'export' may only appear at the top level?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]