title: Aliased imports are not supported anymore when creating a new typescript react app
body: <p>I created a new React-typescript app via this command with <code>react@17.0.2</code> and <code>typescript@4.5.2</code>:</p>
  <p><code>npx create-react-app my-app --template typescript</code></p>
  <p>Then I decided to define the alias path as I did many times before. I created the <code>tsconfig.paths.json</code> in the root of my app.</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;./src&quot;,
      &quot;paths&quot;: {
        &quot;components/*&quot;: [&quot;/components/*&quot;],
        &quot;routes/*&quot;: [&quot;/routes/*&quot;],
        &quot;constants/*&quot;: [&quot;/constants/*&quot;]
      }
    }
  }
  </code></pre>
  <p>Then I added the <code>extend</code> property to the <code>tsconfig.json</code> file:</p>
  <pre><code>{
    &quot;extends&quot;: &quot;./tsconfig.paths.json&quot;,
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;esnext&quot;
      ],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;noFallthroughCasesInSwitch&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;jsx&quot;: &quot;react-jsx&quot;
    },
    &quot;include&quot;: [
      &quot;src&quot;
    ]
  }
  </code></pre>
  <p>Also, I installed <code>react-app-rewired@2.1.8</code> and created the <code>config-override.js</code>:</p>
  <pre><code>const path = require('path');
  
  module.exports = function override(config) {
      config.resolve = {
          ...config.resolve,
          alias: {
              ...config.alias,
              'components': path.resolve(__dirname, 'src/components/*'),
              'routes': path.resolve(__dirname, 'src/routes/*'),
              'constants': path.resolve(__dirname, 'src/constants/*'),
          }
      }
      return config;
  }
  </code></pre>
  <p>So I reopened my IDE (VSCode) and ran <code>npm start</code>. I must mention I changed scripts in the <code>package.json</code> before running the start command.</p>
  <pre><code>{
   .
   .
   .
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-app-rewired start&quot;,
      &quot;build&quot;: &quot;react-app-rewired build&quot;,
      &quot;test&quot;: &quot;react-app-rewired test&quot;,
      &quot;eject&quot;: &quot;react-app-rewired eject&quot;
    }
   .
   .
   .
  }
  </code></pre>
  <p>After running the start command, this message was displayed in a terminal, and compiling is failed:</p>
  <p><em>The following changes are being made to your tsconfig.json file:
  -compilerOptions.paths must not be set (aliased imports are not supported)</em></p>
  <p>*Failed to compile.</p>
  <p>./src/App.tsx
  Module not found: Can't resolve 'components' in .......*</p>
  <p>So I started to search about this issue to resolve it. I found many approaches that I will mention some of them below:</p>
  <p><em><strong>1.</strong></em> Go to your <code>jsconfig.json</code> file add the base URL to be &quot;.&quot;</p>
  <pre><code>&quot;compilerOptions&quot;: {
     &quot;baseUrl&quot;: &quot;.&quot;,
     ...
  </code></pre>
  <p>Then you can directly import stuff from the src directory</p>
  <pre><code>import Myfile from &quot;src/myfile.js&quot;
  </code></pre>
  <p><strong>Result ==&gt; DID NOT WORK!</strong></p>
  <p><em><strong>2.</strong></em> This problem is solved by an alias for rewire. Install <code>react-app-rewire-alias</code> then create <code>config-override.js</code> file:</p>
  <pre><code>     const {alias, configPaths} = require('react-app-rewire-alias')
  
       module.exports = function override(config) {
        alias(configPaths())(config)
        return config
       }
  </code></pre>
  <p><strong>Result ==&gt; DID NOT WORK!</strong></p>
  <p><em><strong>3.</strong></em> Using <code>craco@6.4.1</code> package</p>
  <ol>
  <li><p>Install <a href="https://github.com/gsoft-inc/craco/blob/master/packages/craco" rel="noreferrer">craco</a> and <a href="https://github.com/risenforces/craco-alias" rel="noreferrer">craco-alias</a> <code>npm install @craco/craco --save</code> and <code>npm i -D craco-alias</code></p>
  </li>
  <li><p>Create <code>tsconfig.paths.json</code> in root directory</p>
  <pre><code>{
      &quot;compilerOptions&quot;: {
          &quot;baseUrl&quot;: &quot;./src&quot;,
          &quot;paths&quot;: {
             &quot;@components/*&quot; : [&quot;./components/*&quot;]
           }
      }
  }
  </code></pre>
  </li>
  <li><p>Extend <code>tsconfig.paths.json</code> in <code>tsconfig.json</code></p>
  <p>{
  &quot;extends&quot;: &quot;./tsconfig.paths.json&quot;,
  //default configs...
  }</p>
  </li>
  <li><p>Create <code>craco.config.js</code> in the root directory</p>
  <pre><code>const CracoAlias = require(&quot;craco-alias&quot;);
  
  module.exports = {
     plugins: [
       {
          plugin: CracoAlias,
          options: {
             source: &quot;tsconfig&quot;,
             // baseUrl SHOULD be specified
             // plugin does not take it from tsconfig
             baseUrl: &quot;./src&quot;,
             /* tsConfigPath should point to the file where &quot;baseUrl&quot; and &quot;paths&quot; 
             are specified*/
             tsConfigPath: &quot;./tsconfig.paths.json&quot;
          }
       }
    ]
  };
  </code></pre>
  </li>
  <li><p>in <code>package.json</code> swap <code>&quot;start&quot;: &quot;react-scripts start&quot;</code> with <code>&quot;start&quot;: &quot;craco start&quot;</code></p>
  </li>
  </ol>
  <p><strong>Result ==&gt; DID NOT WORK!</strong></p>
  <p>I'm confused because I used the alias path many times before, but it does not work now. I don't want to <code>eject</code> my app but using the alias path is helpful.</p>