tsconfig compilerOptions paths alias config not working

[NoTalk-ly]

there is a repo to recurrent this problem:
https://github.com/NoTalk-ly/create-react-app-path-alias-test
or
https://codesandbox.io/s/dry-snow-sfo15?file=/src/index.tsx.

when npm run start， there is a error after compile:

how can I get the "@src" path alias work ?

[ghost]

Using path aliases with react-app-rewired and react-app-rewire-alias is quite easy. Create a new React TypeScript App and follow along.

yarn create react-app my-app --template typescript
yarn add --dev react-app-rewired react-app-rewire-alias

Create a config-overrides.js at the root of the project and add path aliases.

// config-overrides.js

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias({
    '@assets' : 'src/assets'
  })(config)
  
  return config
}

Also edit package.json to replace react-scripts to react-app-rewired in scripts.

// package.json

{
  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
}

For this example, create an assets directory in src, and move logo.svg from src to src/assets. Now edit your App.tsx to look for logo.svg in @assets/logo.svg.

// App.tsx

- import logo from './logo.svg';
+ import logo from '@assets/logo.svg';

All Done! This should work. To run your project use yarn start.

This might not work in CodeSandbox.