title: "No codeFrame could be generated" error on fresh 'npm init gatsby' site
body: <p>I created a fresh gatsby site by using the command <code>npm init gatsby</code> on a M1 Mac. I kept all options to default in the wizard and started by <code>npm run develop</code>. I immediately get this error on every refresh:</p>
  <p><a href="https://i.stack.imgur.com/hIAM8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hIAM8.png" alt="enter image description here" /></a></p>
  <p>Although it's annoying the site is working fine. The error doesn't give much information and I couldn't find anyhting on google. My node version is <strong>v17.2.0</strong> and this is the auto generated package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;my-gatsby-site&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;private&quot;: true,
    &quot;description&quot;: &quot;My Gatsby Site&quot;,
    &quot;keywords&quot;: [
      &quot;gatsby&quot;
    ],
    &quot;scripts&quot;: {
      &quot;develop&quot;: &quot;gatsby develop&quot;,
      &quot;start&quot;: &quot;gatsby develop&quot;,
      &quot;build&quot;: &quot;gatsby build&quot;,
      &quot;serve&quot;: &quot;gatsby serve&quot;,
      &quot;clean&quot;: &quot;gatsby clean&quot;
    },
    &quot;dependencies&quot;: {
      &quot;gatsby&quot;: &quot;^4.3.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;
    }
  }
  
  </code></pre>
  <p><strong>EDIT:</strong></p>
  <p>I'm using Firefox.</p>