title: Module not found: Error: Can't resolve the typescript file when adding typescript to a CRA app
body: <p>I'm trying to add <code>typescript</code> to my project and write new components with typescript. I followed the documentation but I'm got this error:<br />
  <code>can't resolve [the typescript file] </code></p>
  <p>this happens even with a fresh <code>create-react-app</code> project.<br />
  according to <a href="https://create-react-app.dev/docs/adding-typescript/" rel="noreferrer">CRA documentation</a> for adding <code>typescript</code> To an existing Create React App project, first, we must install <code>typescript</code> and <code>type definition files</code>:</p>
  <pre><code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest
  </code></pre>
  <p>almost done!<br />
  rename a <code>js/jsx</code> file to <code>tsx</code> and restart your development server!</p>
  <p>for simplicity, I'm creating a <code>typescript</code> file named <code>test.tsx</code> that contains the <code>Test</code> component:</p>
  <pre><code>export default function Test(){
      return (
          &lt;div&gt;this is test to see typescirpt&lt;/div&gt;
      )
  }
  </code></pre>
  <p>and importing it to the <code>main.js</code> and rendering it:</p>
  <pre><code>import Test from &quot;./test&quot;;
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Test /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>now I'm restarting the development server (I closed the previous one with <code>CRTL+c</code>) with <code>npm start</code>.<br />
  I got this error:</p>
  <pre><code>Compiled with problems:
  
  ERROR in ./src/App.js 4:0-26
  
  Module not found: Error: Can't resolve './test' in '/home/g/w/ts/test_adding_ts/src'
  
  </code></pre>
  <p>I used a fresh <code>create-react-app</code> project, followed the documentation, and saw this error. (why?)<br />
  this is my installed dependencies:</p>
  <pre><code>  &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^13.0.1&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;@types/jest&quot;: &quot;^27.4.1&quot;,
      &quot;@types/node&quot;: &quot;^17.0.24&quot;,
      &quot;@types/react&quot;: &quot;^18.0.5&quot;,
      &quot;@types/react-dom&quot;: &quot;^18.0.1&quot;,
      &quot;react&quot;: &quot;^18.0.0&quot;,
      &quot;react-dom&quot;: &quot;^18.0.0&quot;,
      &quot;react-scripts&quot;: &quot;5.0.1&quot;,
      &quot;typescript&quot;: &quot;^4.6.3&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.4&quot;
    },
  </code></pre>
  <h1>EDIT:</h1>
  <h1>none of these answers isn't what I looking for. I think the world has changed and nowadays Reddit is the better to place to seek help.</h1>