cannot import modules in src aliased in tsconfig paths compilerOptions

Describe the bug

Cannot import files aliased in the tsconfig paths. imports sometimes work for some files but often don’t. I can’t say i know why, but when the break the errors are cascading causing imports with aliased paths to break too and forcing the whole project to revert back to relative path imports

(Write your answer here.)

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

https://create-react-app.dev/docs/adding-typescript/#troubleshooting

Environment

Environment Info:

current version of create-react-app: 5.0.0 running from /home/craft/.config/yarn/global/node_modules/create-react-app

System: OS: Linux 5.14 Arch Linux CPU: (8) x64 Intel® Xeon® CPU W3530 @ 2.80GHz Binaries: Node: 17.3.0 - /tmp/yarn–1640220951632-0.6230549606809872/node Yarn: 1.22.17 - /tmp/yarn–1640220951632-0.6230549606809872/yarn npm: 8.3.0 - /usr/bin/npm Browsers: Chrome: Not Found Firefox: 95.0.2 npmPackages: react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 react-scripts: 5.0.0 => 5.0.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. yarn create react-app sample --template typescript
2. cd sample
3. add "baseUrl" : "." and "paths" : { "@app/*": ["src/*"] } options to thecompilerOptions in tsconfig.json
4. cd src
5. mkdir sub
6. cd sub
7. touch index.ts
8. create a valid default export of any variable, constant, class, or function in the index.ts file just created
9. cd …
10. add the line import sub from '@app/sub'; to your App.tsx imports in the src/ directory
11. and try running yarn start from application root

Expected behavior

No errors

Actual behavior

Compiled with problems:

ERROR in ./src/App.tsx 6:0-27

Module not found: Error: Can't resolve '@app/sub' in '/home/craft/Projects/node/cra/src'

Reproducible demo

could not recreate the problem in https://codesandbox.io/s/trusting-morse-bs8tc?file=/src/App.tsx because it seams to work just fine there.

[Josh-Cena]

Looking a few lines up, you see the actual aliases that CRA generates.

https://github.com/facebook/create-react-app/blob/bb64e31a81eb12d688c14713dce812143688750a/packages/react-scripts/config/modules.js#L65-L79

The only alias is src => paths.appSrc which is reasonable so you can always do import Foo from 'src/components/Foo without relative paths.

[ghanshyamtanchak]

I have added this type of path in tsconfig file "paths": {"@app/*": ["src/*"]}

and use this relative path to my routes file

import Register from "@app/pages/register";

it’s causing this type of error

ERROR in ./src/App.tsx 5:0-43
Module not found: Error: Can't resolve '@app/pages/register' in 'D:\auth-app\src'```