Add baseUrl and paths in tsconfig.json and jsconfig.json

tsconfig.json or jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"]
    }
  }
}

see https://github.com/facebook/create-react-app/issues/5118

This will help VSCode and other IDE to resolve path in TypeScript & JavaScript.

[babakness]

As a hack/work around, one can set the desired configurations in a different .json file then use the extends features of tsconfig.json. While you do get a warning, it does not override and the settings and proceeds. Using this setting I can test and build without issue (so far)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "svg/*": ["src/svg/*"],
      "components/*": ["src/components/*"]
    }
  }
}

in tsconfig.json I have

{
  "extends": "./paths.json"
}

[mgcrea]

My 2cts after having played with this for a while:

For a solution to absolute paths without any customization, you can use the following solution (tested with react-scripts@2.1.3, react-scripts@2.1.8).

1. Add a .env file:

NODE_PATH=./

1. Add a tsconfig.paths.json file:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "src/*": ["*"]
    }
  }
}

1. Add the following line at the end of the generated tsconfig.json.

"extends": "./tsconfig.paths.json"

Both compilation and intellisense should now work with absolute import support using the src/ prefix 🎉 (eg. import Counter from 'src/components/Counter';)

You can even reuse the exact same setup (without even needing the extends hack) for non-typescript projects with a jsconfig.json file.

I quite like the src/ prefix convention which is perfectly explicit (Principle of Least Surprise) vs a more cryptic @/ or ~/, tilde is also commonly aliased tonode_modules/ in the scss world so I think it should be avoided.

And the bonus point for src/ is that it easily works outside the box thanks to the NODE_PATH env var without any extra webpack tweaks. Also works with jest tests (but if you want to store them inside the root test directory, you’ll have to add "test" to the "include" array in the tsconfig.json (won’t be overwritten).

Finally if you start working on mono-repos of CRA’s (I’ve been doing that lately to leverage a shared storybook-based components “library” across multiple apps), you’ll encounter errors when cross referencing files that all uses the same absolute convention, I’ve built a babel plugin to address that, might be useful.