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

[xiaoxiangmoe]

tsconfig.json or jsconfig.json:

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

see #5118

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

[tanduong]

You may be interested: #5118 (comment)

[xiaoxiangmoe]

@tanduong if we use yarn-pnp, we have no node_modules dir.

[paul-sachs]

All of these solutions don't resolve some reasons to just typescript "paths" feature. And without "baseUrl" set to something, paths don't work at all. I really think that baseURL (at least set to .) should be something we can opt into.

[babakness]

I'm having this issue. I have NODE_PATH set , to make it work w/ TS i need to set paths to set that I need baseUrl and here we are.

[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"
}

[ianschmitz]

One of the side-effects of setting baseUrl: ".", is that TypeScript now thinks you can import using an absolute path of "src/Foo", which may or may not work with the current webpack/jest config. It's unfortunate that we can't use paths without also being forced to opt into the absolute path from baseUrl.

[xiaoxiangmoe]

@ianschmitz tsconfig-paths-webpack-plugin can works with current webpack config. We can use tslint to show warn of 「using an absolute path of "src/Foo"」

[cncolder]

It just works with react-scripts@2.0.5 and react-app-rewire-typescript-babel-preset@3
I waste half day on this. Now I decide downgrade.

[mrmckeb]

We have our own version of react-scripts and customise this for our needs.

One solution I think could work is to allow it to be set whenever NODE_PATH is set to src, for less confusion (note, I don't use the @-style).

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

[izayl]

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"
}

It seems not work at CRA@2.0.4