Repository: create-react-app
Issue: Aliased imports are not supported anymore when creating a new typescript react app
Labels: needs triage

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