title: How to resolve Unexpected Token Error in nextJS project?
body: <p>I set up a new &quot;next.js&quot; project and wanted to start coding, but I'm now stuck for hours with the below error message.</p>
  <p>I've taken a reference code to start with as below -</p>
  <pre><code>import styled from &quot;styled-components&quot;;
  
  function Sidebar() {
      return {
  
          &lt;Container&gt; 
              &lt;h1&gt; Sidebar &lt;/h1&gt;
          &lt;/Container&gt;
  
      }
  }
  
  export default sidebar;
  
  const Container = styled.div;
  </code></pre>
  <p>This is the error:</p>
  <pre><code>      x Unexpected token `&lt; (jsx tag start)`. Expected identifier, string literal, numeric literal or [ for the computed key   
     ,----
   7 | &lt;Container&gt;
     : ^
     `----
  </code></pre>
  <p>Of course, I did my Google research and tinkered around in different config files. There are a lot of different solutions, but none worked for me (so far). My guess is that it's something to do with the <code>babel</code> configuration., but I am groping in the dark.</p>
  <p>My .babelrc file:</p>
  <pre><code>{
    &quot;presets&quot;: [&quot;env&quot;],
    &quot;plugins&quot;: [
      [&quot;transform-replace-object-assign&quot;, { &quot;moduleSpecifier&quot;: &quot;object.assign&quot; }],
      &quot;transform-object-rest-spread&quot;,
      // &quot;@babel/plugin-proposal-nullish-coalescing-operator&quot;, // TODO: update to babel 7
    ],
  }
  </code></pre>
  <p>Look to see the guidance on this.</p>