Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
xiaoxiangmoe opened this issue Oct 31, 2018 · 89 comments
Open

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

xiaoxiangmoe opened this issue Oct 31, 2018 · 89 comments
Projects
Milestone

Comments

@xiaoxiangmoe
Copy link
Contributor

@xiaoxiangmoe xiaoxiangmoe commented Oct 31, 2018

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

This comment has been minimized.

Copy link

@tanduong tanduong commented Oct 31, 2018

You may be interested: #5118 (comment)

@xiaoxiangmoe

This comment has been minimized.

Copy link
Contributor Author

@xiaoxiangmoe xiaoxiangmoe commented Oct 31, 2018

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

@paul-sachs

This comment has been minimized.

Copy link

@paul-sachs paul-sachs commented Nov 1, 2018

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

This comment has been minimized.

Copy link

@babakness babakness commented Nov 1, 2018

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

This comment has been minimized.

Copy link

@babakness babakness commented Nov 1, 2018

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

This comment has been minimized.

Copy link
Collaborator

@ianschmitz ianschmitz commented Nov 2, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@xiaoxiangmoe xiaoxiangmoe commented Nov 2, 2018

@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

This comment has been minimized.

Copy link

@cncolder cncolder commented Nov 2, 2018

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

This comment has been minimized.

Copy link
Collaborator

@mrmckeb mrmckeb commented Nov 2, 2018

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

This comment has been minimized.

Copy link

@izayl izayl commented Nov 7, 2018

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

@jedmao

This comment has been minimized.

Copy link

@jedmao jedmao commented Nov 9, 2018

@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

This comment has been minimized.

Copy link

@murugaratham murugaratham commented Nov 14, 2018

I've tried extending tsconfig.json but it's still unable to resolve, I'm using cra@2.1.1

@stale

This comment has been minimized.

Copy link

@stale stale bot commented Dec 15, 2018

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.

@stale stale bot added the stale label Dec 15, 2018
@babakness

This comment has been minimized.

Copy link

@babakness babakness commented Dec 15, 2018

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.

@stale stale bot removed the stale label Dec 15, 2018
@ChristianIvicevic

This comment has been minimized.

Copy link

@ChristianIvicevic ChristianIvicevic commented Dec 19, 2018

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.

@jedmao

This comment has been minimized.

Copy link

@jedmao jedmao commented Dec 19, 2018

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

@ChristianIvicevic

This comment has been minimized.

Copy link

@ChristianIvicevic ChristianIvicevic commented Dec 19, 2018

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.

@jedmao

This comment has been minimized.

Copy link

@jedmao jedmao commented Dec 20, 2018

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

@babakness

This comment has been minimized.

Copy link

@babakness babakness commented Dec 20, 2018

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

@jedmao

This comment has been minimized.

Copy link

@jedmao jedmao commented Dec 20, 2018

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

This comment has been minimized.

Copy link

@yskkin yskkin commented Dec 20, 2018

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

This comment has been minimized.

Copy link

@ChristianIvicevic ChristianIvicevic commented Dec 20, 2018

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.

@delaaxe

This comment has been minimized.

Copy link

@delaaxe delaaxe commented May 17, 2019

@mytee306 Got it working by changing
TS options to :

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

Now in index.tsx I can use real absolute paths :
import Foo from "src/path/to/Foo";

Same thing for lib

@joshclowater

This comment has been minimized.

Copy link

@joshclowater joshclowater commented May 17, 2019

Has anyone gotten this to work without TS? I saw the deprecation warning about no longer supporting NODE_PATH in .env, so I've tried adding a bunch of the above suggestions to a jsconfig.json file, such as:

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

(along with different "paths" like "src/*": ["*"]), but I can't seem to get it to work (on react-scripts 3.0.1). Still getting ./src/index.js Module not found: Can't resolve 'src/containers/App'.

@mateja176

This comment has been minimized.

Copy link

@mateja176 mateja176 commented May 17, 2019

@delaaxe Typescript recognizes the type signature and VSCode references also work out of the box. The issue pops up when you run the start script.

@kevupton

This comment has been minimized.

Copy link

@kevupton kevupton commented Jun 1, 2019

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

@JuliusKoronci

This comment has been minimized.

Copy link

@JuliusKoronci JuliusKoronci commented Jun 15, 2019

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

@muratdogan17

This comment has been minimized.

Copy link

@muratdogan17 muratdogan17 commented Aug 9, 2019

Are there any improvements to this?

@HappyBangs

This comment has been minimized.

Copy link

@HappyBangs HappyBangs commented Aug 10, 2019

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.

@iansu iansu modified the milestones: 3.x, 3.2 Aug 10, 2019
@iansu iansu added this to To do in v3.3 via automation Aug 10, 2019
@joshclowater

This comment has been minimized.

Copy link

@joshclowater joshclowater commented Aug 14, 2019

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

This comment has been minimized.

Copy link

@delaaxe delaaxe commented Aug 14, 2019

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

This comment has been minimized.

Copy link

@DV2017 DV2017 commented Aug 15, 2019

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

This comment has been minimized.

Copy link

@codercodingthecode codercodingthecode commented Aug 21, 2019

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

This comment has been minimized.

Copy link

@tommedema tommedema commented Aug 21, 2019

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.

@Gasheck

This comment has been minimized.

Copy link

@Gasheck Gasheck commented Sep 23, 2019

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)

  1. In both packages you have baseUrl: 'src'
  2. In the package2 you import something2 to something1import something2 from "components/something2"
  3. Then you import something1 into your root package import something from '@package2/src/components/something1'
  4. 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:

  1. package2/something1: import something2 from "@package2/components/something2"
  2. package1: import something1 from "@package2/components/something1"
@juancancela

This comment has been minimized.

Copy link

@juancancela juancancela commented Sep 30, 2019

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.

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

This comment has been minimized.

Copy link

@LoiKos LoiKos commented Oct 8, 2019

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

@rovansteen

This comment has been minimized.

Copy link
Collaborator

@rovansteen rovansteen commented Oct 8, 2019

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

@LoiKos

This comment has been minimized.

Copy link

@LoiKos LoiKos commented Oct 8, 2019

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

#7795

@facebook facebook locked and limited conversation to collaborators Oct 8, 2019
@iansu iansu added this to To do in v4 via automation Oct 16, 2019
@iansu iansu removed this from To do in v3.3 Oct 16, 2019
@iansu iansu modified the milestones: 3.3, 4.0 Oct 16, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
v4
  
To do
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.