Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
How can I configure the paths in
tsconfig.json
so instead of:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
I can use:
import { Something } from "lib/src/[browser/server/universal]/...";
Will something else be required in the webpack config? or is the tsconfig.json enough?
This can be set up on your tsconfig.json file, as it is a TS feature.
You can do like this:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
Have in mind that the path where you want to refer to, it takes your baseUrl as the base of the route you are pointing to and it's mandatory as described on the doc.
The character '@' is not mandatory.
After you set it up on that way, you can easily use it like this:
import { Yo } from '@config/index';
the only thing you might notice is that the intellisense does not work in the current latest version, so I would suggest to follow an index convention for importing/exporting files.
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
–
–
–
–
–
You can use combination of baseUrl and paths docs.
Assuming root is on the topmost src dir(and I read your image properly) use
// tsconfig.json
"compilerOptions": {
"baseUrl": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
For webpack you might also need to add module resolution. For webpack2 this could look like
// webpack.config.js
module.exports = {
resolve: {
modules: [
'./src/org/global'
–
If you are using paths, you will need to change back absolute paths to relative paths for it to work after compiling typescript into plain javascript using tsc.
Most popular solution for this has been tsconfig-paths so far.
I've tried it, but it did not work for me for my complicated setup.
Also, it resolves paths in run-time, meaning overhead in terms of your package size and resolve performance.
So, I wrote a solution myself, tscpaths.
I'd say it's better overall because it replaces paths at compile-time. It means there is no runtime dependency or any performance overhead. It's pretty simple to use. You just need to add a line to your build scripts in package.json.
The project is pretty young, so there could be some issues if your setup is very complicated.
It works flawlessly for my setup, though my setup is fairly complex.
–
If you are looking for the most minimalist example for referencing your root folder with @, this would be it:
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"]
// Example usage: import * as logUtils from '@/utils/logUtils';
Or if you don't even have a src folder or would like to explicitly include it in the imports, this would also work:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["*"]
// Example usage: import * as logUtils from '@/src/utils/logUtils';
If you are using tsconfig-paths and this does not work for you, try tsconfig.json:
// ...
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"baseUrl": ".",
"paths": {
"@some-folder/*": ["./src/app/some-folder/*", "./dist/app/some-folder/*"],
// ...
// ...
If the compiler sees @some-folder/some-class, it is trying to find it in ./src... or in ./dist....
Instead of the below code
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
We can avoid the "../../../../../" its looking odd and not readable too.
So Typescript config file have answer for the same.
Just specify the baseUrl, config will take care of your relative path.
way to config: tsconfig.json file add the below properties.
"baseUrl": "src",
"paths": {
"@app/*": [ "app/*" ],
"@env/*": [ "environments/*" ]
So Finally it will look like below
import { Something } from "@app/src/[browser/server/universal]/...";
Its looks simple,awesome and more readable..
i'm not sure if we must define the paths. but after write baseUrl to src
i can import all folder under src folder like this
import { Home } from "pages";
import { formatDate } from "utils";
import { Navbar } from "components";
don't forget to restart your terminal after change the tsconfig.json
if typescript + webpack 2 + at-loader is being used, there is an additional step (@mleko's solution was only partially working for me):
// tsconfig.json
"compilerOptions": {
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
resolve: {
plugins: [
new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
Advanced path resolution in TypeScript 2.0
Solution for 2021.
Note: CRA. Initially the idea of using a third party library or ejecting app for alias seemed crazy to me. However, after 8 hours of searching (and trying variant with eject), it turned out that this option is the least painful.
Step 1.
yarn add --dev react-app-rewired react-app-rewire-alias
Step 2.
Create config-overrides.js file in your project's root and fill it with :
const {alias} = require('react-app-rewire-alias')
module.exports = function override(config) {
return alias({
assets: './src/assets',
'@components': './src/components',
})(config)
Step 3. Fix your package.json file:
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
If @declarations don't work, add them to the d.ts file.
For example:
'@constants': './src/constants', => add in react-app-env.d.ts declare module '@constants';
That is all. Now you can continue to use yarn or npm start/build/test commands as usual.
Full version in docs.
Note: The 'Using with ts / js config' part in docs did not work for me. The error "aliased imports are not supported" when building the project remained. So I used an easier way. Luckily it works.
–
–
It looks like there has been an update to React that doesn't allow you to set the "paths" in the tsconfig.json anylonger.
Nicely React just outputs a warning:
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
then updates your tsconfig.json and removes the entire "paths" section for you. There is a way to get around this run
npm run eject
This will eject all of the create-react-scripts settings by adding config and scripts directories and build/config files into your project. This also allows a lot more control over how everything is built, named etc. by updating the {project}/config/* files.
Then update your tsconfig.json
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"assets/*": [ "assets/*" ],
"styles/*": [ "styles/*" ]
–
Checkout the compiler operation using this
I have added baseUrl in the file for a project like below :
"baseUrl": "src"
It is working fine. So add your base directory for your project.
For a component library
If you are working on a library that returns UI components (Like react-bootstrap or antd) then this should work for you.
"compilerOptions": {
"rootDir": "src",
"baseUrl": ".",
"paths": {
"src/*": ["src/*"],
"components/*": ["src/components/*"],
You can do this with just Node by using Subpath patterns.
For example, adding this to your package.json...
"imports": {
"#lib": "./build/path/to/lib",
"#lib/*": "./build/path/to/lib/*",
...will let you import like so, avoiding relative paths.
import { something } from "#lib"
Note that they must start with a hash, and in package.json, they must point to your build so Node can recognize it.
Like others have said, you can add something like this to your tsconfig.json for Typescript:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#lib": ["./src/path/to/lib"],
"#lib/*": ["./src/path/to/lib/*"],
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
