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

Admin 1
Viewed 28222

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?

reactjs javascript
3 Answers

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

user_12177130

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.

user_27627470

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

user_150751820
Related