title: New React app failed to compile immediatly following install
body: <p>I have been using React Native for a while but figured I would try out React on the web. So I followed this guide: <a href="https://reactjs.org/docs/create-a-new-react-app.html" rel="noreferrer">https://reactjs.org/docs/create-a-new-react-app.html</a> but after using <code>npx create-react-app react-try</code> , navigating to the new folder, and typing <code>yarn start</code> I get this error message:</p>
  <pre><code>Failed to compile.
  
  ./src/index.js 1:60
  Module parse failed: Unexpected token (1:60)
  File was processed with these loaders:
   * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
   * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  &gt; $RefreshRuntime$ = require('C:/Users/e096752/Documents/Cole's Git Repos/react-try/node_modules/react-refresh/runtime.js');
  | $RefreshSetup$(module.id);
  </code></pre>
  <p>This is everything that was included with the create method:
  <a href="https://i.stack.imgur.com/5WyvT.png" rel="noreferrer">Project</a></p>
  <p><strong>Package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;react-try&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.2&quot;,
      &quot;web-vitals&quot;: &quot;^1.0.1&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  
  </code></pre>
  <p>If there is any other info you need please let me know. What in the world do I need to do?</p>