title: ReactJS What's wrong 'import' and 'export' may only appear at the top level?
body: <p>What's wrong in my code react </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export const BeritaView = ({ match }) =&gt; {
    const article = articles.find(item =&gt; item.id === match.params.id);
     console.log(articles, match.params.id);
     return(
        &lt;div&gt;
            &lt;h3&gt; News ID: {match.params.id} &lt;/h3&gt;
            &lt;h4&gt; {article.title} &lt;/h4&gt;
            &lt;p&gt; {article.content} &lt;/p&gt;
            &lt;Link to={`/berita`}&gt; Back to Berita dan Kegiatan &lt;/Link&gt;
        &lt;/div&gt;
     )  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>error calls this : </p>
  
  <blockquote>
    <p>'import' and 'export' may only appear at the top level</p>
  </blockquote>
  
  <p>Can anyone help me?</p>