How to use path aliases within a packages directory? #4304
-
|
I am currently developing an application using turborepo and Remix, and I would like to use path aliases within the packages directory. I want to import I tried setting up the {
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["./*"],
},
}
} But I got errors and the path didn't resolve. I read this Discussion( #620 ), but I want to use If anyone knows how to set up path aliases in a monorepo setup using turborepo for importing packages. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 10 replies
-
|
Is there a better solution than using "#" and "imports"? This method loses autocomplete and triggers a "cannot find module" error, which is very disappointing. Therefore, using normal paths without aliases seems preferable. |
Beta Was this translation helpful? Give feedback.
-
|
Using Node.js subpath imports are the correct solution. Auto-complete works in latest versions of TypeScript and modules will resolve correctly in any LTS Node.js version. It sounds like there may be a misconfiguration in your setup. |
Beta Was this translation helpful? Give feedback.
-
|
Did you fix it @issam-seghir ? |
Beta Was this translation helpful? Give feedback.
-
No, I just stopped using Turborepo to avoid these headaches |
Beta Was this translation helpful? Give feedback.
-
|
@issam-seghir How does turborepo cause this issue? What alternative solution did you choose? |
Beta Was this translation helpful? Give feedback.
-
|
I fixed it, my typescript version 5.4.5 here's what i change packages/ui/package.json "imports": {
"#dep/*": [
"./src/*.ts",
"./src/*.tsx"
]
},and for packages/ui/tsconfig.json {
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "."
},
"exclude": ["node_modules", "dist"]
}and this is how i import the component import { cn } from '#dep/lib/utils'; |
Beta Was this translation helpful? Give feedback.
-
|
This is a perfectly fine practice! But it does have another layer of configuration to make work. 😄
What you end up with is a mismatch between what your compiler sees and what you see in your editor. So, to use subpath imports, you'll need to follow the rules of Node.js (since they're more strict than TypeScript here. In And in Now, everyone speaks the same importing language and you can build successfully. 🥳 |
Beta Was this translation helpful? Give feedback.
-
|
TypeScript now has automatic support for Note: You won't be able to use |
Beta Was this translation helpful? Give feedback.
-
|
@singh-jay you also need to ensure that the extensions are appropriately specified. this is what my package.json looks like. hope that helps. |
Beta Was this translation helpful? Give feedback.
-
|
Just a quick summary for all who may have stumbled into the above: A modern monorepo-friendly alternative to Typescript path aliases is Node.js subpath imports, as recommended in this GitHub issue and the official Turborepo docs. Usage is almost identical to a Typescript path alias, except that they are defined in your {
"imports": {
"#*": "./src/*.ts",
"#db/schema": "./src/db/schema/index.ts"
},
}Adjust all of your imports accordingly: // Old style with relative paths
import type { Filter } from "../../conditions"
import { pagesTable } from "../db/schema";
// New style with subpath imports
import { Filter } from "#conditions";
import { pagesTable } from "#db/schema"; |
Beta Was this translation helpful? Give feedback.
-
What if we have different types of files under a folder |
Beta Was this translation helpful? Give feedback.
-
|
I have the same question as @karatashsyn , this all seems swell for a small project, but manually specifying every single directory/ file will turn quite cumbersome as the project grows. A solution that supports specifying |
Beta Was this translation helpful? Give feedback.
This is a perfectly fine practice! But it does have another layer of configuration to make work. 😄
pathsintsconfigtell TypeScript where to look.What you end up with is a mismatch between what your compiler sees and what you see in your editor.
So, to use subpath imports, you'll need to follow the rules of Node.js (since they're more strict than TypeScript here.
In
packages/ui/package.json:And in
packages/ui/tsconfig.json:Now, everyone speaks the same importing language and you can build successfully. 🥳