Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

cannot import modules in src aliased in tsconfig paths compilerOptions

See original GitHub issue

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?


Which terms did you search for in User Guide?


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 because it seams to work just fine there.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:4
  • Comments:8

github_iconTop GitHub Comments

Josh-Cenacommented, Jan 12, 2022

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

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

ghanshyamtanchakcommented, 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

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

github_iconTop Results From Across the Web

compilerOptions.paths must not be set (alias imports are not ...
So I'm assuming it removes the path field from the tsconfig.json and VSCode cannot pick up the aliases, so ESLint and TS give...
Read more >
Aliased imports are not supported anymore when creating a ...
I created the tsconfig.paths.json in the root of my app. { "compilerOptions": { "baseUrl": "./src", ...
Read more >
Can't resolve path alias : r/reactjs - Reddit
I'm trying to use alias for paths but I can't seem to get it to work I keep getting this error even though...
Read more >
Documentation - Module Resolution - TypeScript
Module resolution is the process the compiler uses to figure out what an import refers to. Consider an import statement like import {...
Read more >
Simpler Typescript paths with path aliases - Christian Lüdemann
This means that you can have an alias called @app for the absolute path “src/app” and if you wanted to import a module...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found