Repository navigation
cannot import modules in src aliased in tsconfig paths compilerOptions #11834
Description
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
- yarn create react-app sample --template typescript
- cd sample
- add
"baseUrl" : "."and"paths" : { "@app/*": ["src/*"] }options to thecompilerOptionsin tsconfig.json - cd src
- mkdir sub
- cd sub
- touch index.ts
- create a valid default export of any variable, constant, class, or function in the index.ts file just created
- cd ..
- add the line
import sub from '@app/sub';to your App.tsx imports in the src/ directory - 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.
Activity
nhonreboot commentedon Jan 3, 2022
Also got this issue on my machine. VSCode read
tsconfig.jsonand recognize the import path well, however, the compiler didn't and raise above error 'Module not found'Josh-Cena commentedon Jan 12, 2022
TS doesn't do any path remapping itself, neither does
ts-loaderorbabel-loader. Thepathsoption 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 theresolve.aliasfeature.nhonreboot commentedon Jan 12, 2022
Yep..figure it out already. But is there any way to fix it without eject CRA or switching to Craco?
Josh-Cena commentedon Jan 12, 2022
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 commentedon Jan 12, 2022
@Josh-Cena. thanks for checking out the issue. In the context of CRA it doesn't work as its suppose to. please check out.
https://github.com/facebook/create-react-app/blob/bb64e31a81eb12d688c14713dce812143688750a/packages/react-scripts/config/modules.js#L136
https://github.com/facebook/create-react-app/blob/bb64e31a81eb12d688c14713dce812143688750a/packages/react-scripts/config/webpack.config.js#L348
Josh-Cena commentedon Jan 12, 2022
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.appSrcwhich is reasonable so you can always doimport Foo from 'src/components/Foowithout relative paths.exdj158 commentedon Sep 14, 2022
thanks,I added these changes on tsconfig.json,it worked
compilerOptions:{ "paths": { "appPath": ["./src"], "appSrc": ["./src"] }, "baseUrl": ".", }gtanchak commentedon Nov 27, 2022
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