cannot import modules in src aliased in tsconfig paths compilerOptions

[2p4b]

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(R) Xeon(R) 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.

[nhonreboot]

Also got this issue on my machine. VSCode read tsconfig.json and recognize the import path well, however, the compiler didn't and raise above error 'Module not found'

[Josh-Cena]

TS doesn't do any path remapping itself, neither does ts-loader or babel-loader. The paths option only tells TS about existing path mappings that you have to set up yourself. VSCode is able to understand this, because VSCode only reads the tsconfig. However, your webpack runtime doesn't actually use it for path mapping. In Webpack it's pretty easy to set up with the resolve.alias feature.

[nhonreboot]

Yep..figure it out already. But is there any way to fix it without eject CRA or switching to Craco?

[Josh-Cena]

I'm actually surprised CRA doesn't let you merge additional Webpack config... FWIW, the first thing I do when making a CRA project is ejecting :P

[2p4b]

@Josh-Cena. thanks for checking out the issue. In the context of CRA it doesn't work as its suppose to. please check out.

create-react-app/packages/react-scripts/config/modules.js

Line 136 in bb64e31

webpackAliases: getWebpackAliases(options),

create-react-app/packages/react-scripts/config/webpack.config.js

Line 348 in bb64e31

...(modules.webpackAliases || {}),

[Josh-Cena]

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

create-react-app/packages/react-scripts/config/modules.js

Lines 65 to 79 in bb64e31

	function getWebpackAliases(options = {}) {
	const baseUrl = options.baseUrl;
	if (!baseUrl) {
	return {};
	}
	const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
	if (path.relative(paths.appPath, baseUrlResolved) === '') {
	return {
	src: paths.appSrc,
	};
	}
	}

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

[exdj158]

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

create-react-app/packages/react-scripts/config/modules.js

Lines 65 to 79 in bb64e31

	function getWebpackAliases(options = {}) {
	const baseUrl = options.baseUrl;
	if (!baseUrl) {
	return {};
	}
	const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
	if (path.relative(paths.appPath, baseUrlResolved) === '') {
	return {
	src: paths.appSrc,
	};
	}
	}

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

thanks,I added these changes on tsconfig.json,it worked
compilerOptions:{ "paths": { "appPath": ["./src"], "appSrc": ["./src"] }, "baseUrl": ".", }

[gtanchak]

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'```