title: Why am I unable to import my component in react?
body: <p>I am doing a basic import of a component and it keeps on giving me this error:</p>
  <pre><code>./src/Nav.js
  Module not found: You attempted to import ..\node_modules\@pmmmwh\react-refresh-webpack-plugin\lib\runtime\RefreshUtils.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
  </code></pre>
  <p>But my Nav component is inside the /src.</p>
  <p>my import</p>
  <pre><code>  import React from 'react'
      
          const Nav = () =&gt;  {
          
              return(
                  &lt;header class=&quot;header&quot;&gt;
                      
                  &lt;/header&gt;
              )
          }
          
          export default Nav
  </code></pre>
  <p>Here is my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;react-timesheet-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.16&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.16&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-helmet&quot;: &quot;^6.1.0&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;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;webpack&quot;: &quot;^5.22.0&quot;
    }
  }
  </code></pre>
  <p>I recently had a similar problem with missing packages, if that is the reason for the error, why do I keep on getting them?</p>