How to use paths in tsconfig json

Question

I was reading about path-mapping in tsconfig json and I wanted to use it to avoid using the following ugly paths     The project organization is a bit weird because we have a mono-repository that contains projects and libraries  The projects are grouped by company and by browser   server   universal     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

User · Answer

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/*" ]
        }
    },
}

User · Answer

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

User · Answer

This can be set up on your tsconfig json file  as it is a TS feature  You can do like this   quot compilerOptions quot              quot baseUrl quot    quot src quot      This must be specified if  quot paths quot  is                        quot paths quot                  quot  app   quot     quot app   quot                 quot  config   quot     quot app  config   quot                 quot  environment   quot     quot environments   quot                 quot  shared   quot     quot app  shared   quot                 quot  helpers   quot     quot helpers   quot                           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

User · Answer

Alejandros answer worked for me  but as I m using the awesome-typescript-loader with webpack 4  I also had to add the tsconfig-paths-webpack-plugin to my webpack config file for it to resolve correctly

User · Answer

Check this similar solutions with asterisk     baseUrl           paths                       node modules            src types

User · Answer

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

User · Answer

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      quot compilerOptions quot                  quot baseUrl quot    quot   quot        quot paths quot            quot lib   quot              quot src org global lib   quot                       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

User · Answer

This works for me    yarn add --dev tsconfig-paths   ts-node -r tsconfig-paths register  lt your-index-file gt  ts   This loads all paths in tsconfig json  A sample tsconfig json          compilerOptions                            baseUrl      src            paths                  assets        assets                    styles        styles                           Make sure you have both baseUrl and paths for this to work  And then you can import like    import  AlarmIcon  from  assets icons

User · Answer

starts from the root only  to get the relative path we should use    or

User · Answer

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

User · Answer

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     quot scripts quot     -    quot start quot    quot react-scripts start quot        quot start quot    quot react-app-rewired start quot   -    quot build quot    quot react-scripts build quot        quot build quot    quot react-app-rewired build quot   -    quot test quot    quot react-scripts test quot        quot test quot    quot react-app-rewired test quot        quot eject quot    quot react-scripts eject quot     If  declarations don t work  add them to the d ts file  For example    constants      src constants     gt  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  quot aliased imports are not supported quot  when building the project remained  So I used an easier way  Luckily it works

User · Answer

Its kind of relative path 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

[typescript] How to use paths in tsconfig.json?

Examples related to typescript

Examples related to node-modules

Examples related to tsconfig