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

xiaoxiangmoe · 2018-10-31T06:38:47Z

tsconfig.json or jsconfig.json:

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

see #5118

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

The text was updated successfully, but these errors were encountered:

tanduong · 2018-10-31T07:49:55Z

You may be interested: #5118 (comment)

xiaoxiangmoe · 2018-10-31T07:56:21Z

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

paul-sachs · 2018-11-01T20:35:49Z

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 · 2018-11-01T21:25:45Z

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 · 2018-11-01T21:56:59Z

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 · 2018-11-02T03:26:16Z

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 · 2018-11-02T05:44:15Z

@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 · 2018-11-02T08:07:11Z

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

mrmckeb · 2018-11-02T16:48:40Z

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 · 2018-11-07T12:55:19Z

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 [email protected]

jednano · 2018-11-09T20:12:23Z

@babakness I would name that paths.json file tsconfig.paths.json so that vscode provides Intellisense for the file.

Also, why not just "baseUrl": "./src"? Are you importing files outside of ./src? Just trying to understand the motifivation, because managing all the folder names within src is not ideal.

murugaratham · 2018-11-14T23:47:23Z

I've tried extending tsconfig.json but it's still unable to resolve, I'm using [email protected]

stale · 2018-12-15T00:29:52Z

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

babakness · 2018-12-15T19:05:09Z

What is the current recommendation for getting absolute paths to work? It would be great if it worked with TypeScript's built in way of doing this.

ChristianIvicevic · 2018-12-19T15:35:18Z

I am trying to use baseUrl and paths but CRA automatically removes those settings from my tsconfig.json completely disabling the use of them which is highly frustrating.

jednano · 2018-12-19T17:54:54Z

@ChristianIvicevic I had the same issue. Once I realized that's not a supported path, I 🤷‍♂️

ChristianIvicevic · 2018-12-19T22:44:56Z

This issue is disappointing, since I want to avoid weird relative paths, especially something like ../../../components/Foo/Bar. On the other hand I'd really prefer not to eject at all since I don't need a full blown customization of the default configuration. It just bothers me how opinionated CRA is while still being so useful for small pet projects at the very same time.

jednano · 2018-12-20T01:41:00Z

It is frustrating. It doesn't make sense that anyone would have to eject for something so small like this.

babakness · 2018-12-20T02:51:49Z

Some hack ideas I have is to configure the file system to prevent overriding the file by CRA and to try the new TypeScript 3.2 feature where you can extend from an NPM package.

https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#tsconfigjson-inheritance-via-nodejs-packages

I don't have time to hack it right now but honestly one reason I've not upgraded CRA2 since the extend hack above was patched.

CRA2 should at least allow us to do what we want at "our own risk".

jednano · 2018-12-20T04:46:22Z

The more important question is why is CRA changing this file? What's the underlying problem or concern? I'd love to know, because perhaps someone can come up with a better solution.

yskkin · 2018-12-20T07:42:58Z

Reasoning is here: #5585 (comment)

I think users should be allowed to change config even if it is not supported at their own risk.

ChristianIvicevic · 2018-12-20T07:50:21Z

Some hack ideas I have is to configure the file system to prevent overriding the file by CRA and to try the new TypeScript 3.2 feature where you can extend from an NPM package.

I actually attempted this as well as described here: #5645 (comment)

Unfortunately CRA had a meltdown and basically ignores the settings.

kevupton · 2019-06-01T08:54:22Z

Nothing works for paths in tsconfig as of version 3.0.1. Which makes yarn linked packages impossible to work with...

JuliusKoronci · 2019-06-15T11:34:21Z

And here I though I can use lerna wit ts packages and just set up paths to have HMR :D

muratdogan17 · 2019-08-09T13:47:50Z

Are there any improvements to this?

HappyBangs · 2019-08-10T16:47:03Z

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

If it doesn't work and you are using monorepo like me.
U can try this hack: (it solved my problem perfectly)

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

Hope to solve your problem.

joshclowater · 2019-08-14T00:35:28Z

If you're not using TypeScript, set jsconfig.json in the root directory to

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

, then update your imports to remove src.

delaaxe · 2019-08-14T15:33:26Z

Why can't people simply include "src" in absolute imports?

Easier to understand, makes it much more obvious which files are internal and which are external deps. Explicit better than implicit.

DV2017 · 2019-08-15T13:02:10Z

I had to use this in jsconfig.json file in my project root for vscode to serve my application to localhost. Not having 'paths' defined did not work. Also having an .env file in addition to jsconfig.json also did not work. I had to delete the .env file.

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

codercodingthecode · 2019-08-21T16:46:48Z

For those of you still having problems with absolute paths and nested folders path
here is what it's working for me.
Basically the baseUrl and the include with src/**/* if you just src or src/* it will not reach the nested folders.
Feel free to use as a template and modify to your needs

{
	"compilerOptions": {
		"baseUrl": "src",
		"target": "es5",
		"lib": [
		"dom",
		"dom.iterable",
		"esnext"
		],
		"strictNullChecks": true,
		"noImplicitReturns": true,
		"noImplicitThis": true,
		"noImplicitAny": true,
		"noUnusedLocals": true,
		"allowJs": true,
		"esModuleInterop": true,
		"allowSyntheticDefaultImports": true,
		"strict": true,
		"forceConsistentCasingInFileNames": true,
		"module": "esnext",
		"moduleResolution": "node",
		"rootDir": "src",
		"resolveJsonModule": true,
		"noEmit": true,
		"jsx": "preserve",
		"skipLibCheck": true,
		"isolatedModules": true,
		"typeRoots": [
		"./src/types",
		"./node_modules/@types"
		],
		"outDir": "build/dist",
		"sourceMap": true,
		"suppressImplicitAnyIndexErrors": true
	},
	"include": [
		"src/**/*"
	],
	"exclude": [
		"./src/types",
		"node_modules"
	]
}

tommedema · 2019-08-21T23:43:44Z

Has anyone gotten typescript references to work?

Using the recommended tsconfig.paths.json hack:

{
  "compilerOptions": {
    "baseUrl": "../",
    "paths": {
      "@bubbles/*": ["./*/src"],
      "*": ["./types/external/*"]
    }
  },
  "include": [
    "src"
  ],
  "references": [
    {
      "path": "../types"
    },
    {
      "path": "../serverless-data-api"
    }
  ]
}

I'm getting this error: File '/.../bubbles/packages/serverless-data-api/src/index.ts' is not under 'rootDir' '/.../bubbles/packages/web-ui/src'. 'rootDir' is expected to contain all source files.

References work fine for non-CRA packages but not for a CRA package. Strangely enough, CRA starts compiling when removing both references completely, which is weird because I do depend on these references.

gena-tokarev · 2019-09-23T09:16:26Z

Why can't people simply include "src" in absolute imports?

Easier to understand, makes it much more obvious which files are internal and which are external deps. Explicit better than implicit.

Because, for example, you have a main root package1 and a nested package2 (using yarn workspaces for instance)

In both packages you have baseUrl: 'src'
In the package2 you import something2 to something1import something2 from "components/something2"
Then you import something1 into your root package import something from '@package2/src/components/something1'
It fails because you provided an absolute path in package2 within it, but, I guess, it tries to find something2 in package1

It would be much easier to have "paths" in both packages and import everything using the aliases provided there. It would be:

package2/something1: import something2 from "@package2/components/something2"
package1: import something1 from "@package2/components/something1"

juancancela · 2019-09-30T03:10:15Z

Have tried many of the solutions for TS posted here and on #5118, and none of them seems to work as of now (using latest version of CRA).
The only thing that seems to work is to create an @ package on node_modules and then link it using yarn, which does not sound like an optimal solution.

LoiKos · 2019-10-08T08:14:47Z

I tried to use absolute import as describe here : https://create-react-app.dev/docs/importing-a-component#absolute-imports (using jsconfig.json)

but i get conflict between one folder of the project and node_modules when i try to import through index.js i think add paths in compilerOptions can solve this

robertvansteen · 2019-10-08T08:51:11Z

@LoiKos please file a new issue and fill in the issue template.

LoiKos · 2019-10-08T09:30:36Z

@LoiKos please file a new issue and fill in the issue template.

#7795

xiaoxiangmoe mentioned this issue Oct 31, 2018

Support absolute imports with @ #5118

Closed

Timer mentioned this issue Nov 1, 2018

Extended configs appear to not be fixed #5678

Open

tanduong mentioned this issue Nov 3, 2018

Supporting absolute import for Typescript #5644

Closed

gopeter mentioned this issue Nov 7, 2018

TypeScript {paths} are not taken into consideration #5585

Closed

tkazec mentioned this issue Nov 9, 2018

TypeScript - absolute path doesn't work #5762

Closed

bsunderhus mentioned this issue Dec 13, 2018

Code review 12.12.2018 strvcom/dep-manager-web#27

Closed

stale bot added the stale label Dec 15, 2018

stale bot removed the stale label Dec 15, 2018

dcsan mentioned this issue Jun 30, 2019

sharing types across client/server Fabianopb/create-mern-ts-app#42

Closed

ppalmeida mentioned this issue Jul 2, 2019

create-react-app + jsconfig.json paths: modules/scripts not found storybookjs/storybook#7205

Closed

iansu modified the milestones: 3.x, 3.2 Aug 10, 2019

PhearZero mentioned this issue Sep 9, 2019

chore: basic create react app HospitalRun/hospitalrun-frontend#1621

Merged

lifenstein referenced this issue in uqlibrary/fez-frontend Oct 1, 2019

Fix resolution absolute URLs for module imports and intellisense

40dffb7

hexjelly mentioned this issue Oct 2, 2019

Typescript aliases bjerkio/stact#11

Closed

facebook locked and limited conversation to collaborators Oct 8, 2019

iansu modified the milestones: 3.3, 4.0 Oct 16, 2019

iansu modified the milestones: 4.0, 4.x Jul 22, 2020

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

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

Comments

xiaoxiangmoe commented Oct 31, 2018 • edited Loading

tanduong commented Oct 31, 2018

xiaoxiangmoe commented Oct 31, 2018

paul-sachs commented Nov 1, 2018

babakness commented Nov 1, 2018 • edited Loading

babakness commented Nov 1, 2018 • edited Loading

ianschmitz commented Nov 2, 2018

xiaoxiangmoe commented Nov 2, 2018 • edited Loading

cncolder commented Nov 2, 2018

mrmckeb commented Nov 2, 2018

izayl commented Nov 7, 2018

jednano commented Nov 9, 2018

murugaratham commented Nov 14, 2018

stale bot commented Dec 15, 2018

babakness commented Dec 15, 2018

ChristianIvicevic commented Dec 19, 2018

jednano commented Dec 19, 2018

ChristianIvicevic commented Dec 19, 2018

jednano commented Dec 20, 2018

babakness commented Dec 20, 2018 • edited Loading

jednano commented Dec 20, 2018

yskkin commented Dec 20, 2018

ChristianIvicevic commented Dec 20, 2018

kevupton commented Jun 1, 2019

JuliusKoronci commented Jun 15, 2019

muratdogan17 commented Aug 9, 2019

HappyBangs commented Aug 10, 2019

joshclowater commented Aug 14, 2019

delaaxe commented Aug 14, 2019

DV2017 commented Aug 15, 2019

codercodingthecode commented Aug 21, 2019 • edited Loading

tommedema commented Aug 21, 2019 • edited Loading

gena-tokarev commented Sep 23, 2019 • edited Loading

juancancela commented Sep 30, 2019 • edited Loading

LoiKos commented Oct 8, 2019

robertvansteen commented Oct 8, 2019

LoiKos commented Oct 8, 2019

xiaoxiangmoe commented Oct 31, 2018 •

edited

Loading

babakness commented Nov 1, 2018 •

edited

Loading

babakness commented Nov 1, 2018 •

edited

Loading

xiaoxiangmoe commented Nov 2, 2018 •

edited

Loading

babakness commented Dec 20, 2018 •

edited

Loading

codercodingthecode commented Aug 21, 2019 •

edited

Loading

tommedema commented Aug 21, 2019 •

edited

Loading

gena-tokarev commented Sep 23, 2019 •

edited

Loading

juancancela commented Sep 30, 2019 •

edited

Loading