Set baseUrl from jsconfig.json/tsconfig.json

[robertvansteen]

This is a partial implementation of #6116. Because there are still a number of things that need to be figured about alias support I think it will be the best approach to add support for baseUrl first.

This will be a breaking change and removes support for setting NODE_PATH in .env file in favor of setting baseUrl in either jsconfig.json or tsconfig.json. It adds a warning to the start script to inform the user about this change if there is a NODE_PATH value in process.env.

This PR aims to add the existing behavior of resolving modules with absolute path that already exists in CRA but in a consistent manner for both TypeScript and JavaScript projects.

Since this is a breaking change it would be nice to get this in with 3.0. After that we can create another PR to add support for aliases (like @) since that would be a non-breaking change.

[zheeeng]

cheers, we neeeeeed it!

[robertvansteen]

Not sure if (or how) the tests on the CI are failing because of my changes 🤔

[eladmotola]

@rovansteen for the tests that failed on install:
change modules.js :
const chalk = require('react-dev-utils/chalk');
instead of - const chalk = require('chalk');

I think it should fix it.
I know its not much but its something I guess... btw thank you for that!

[robertvansteen]

@eladmotola thanks, that fixed the installs suite!

[mrmckeb]

This is great, @rovansteen. Thanks for your hard work.

I'm happy to approve as it is, but I have a discussion point - limiting to src will affect some other projects and the way some users work with CRA currently.

We can consider using paths as I've suggested, I'm interested in your thoughts here.

[iansu]

@rovansteen I've fixed the behavior tests. There are a couple of last minute questions from @mrmckeb and myself and then I think we're ready to merge this.

[robertvansteen]

@iansu thanks! I’m away for a few days now, will be back on Thursday. Then I can look at the question from @mrmckeb.

[iansu]

Thanks for everyone's work on this, especially @rovansteen!

[delaaxe]

Congrats!

[robertvansteen]

Thanks for merging this and helping out with the final bits @iansu! 👏🏻

[mrmckeb]

This works wonderfully, thanks @rovansteen. I think a lot of people are going to be very grateful for your work here!

[iansu]

Now we just need someone to document this before the 3.0 release: #6765

[g1eny0ung]

@rovansteen Thanks to your jobs. 🎉🎉

[nasreddineskandrani]

Thanks for the effort. Really Really appreciated add on.

[FezVrasta]

So do we have to import from 'src/xxx' or can we do as before? (Without src)

[robertvansteen]

@FezVrasta setting the baseUrl to src allows you to import directly from src without prefixing it as such. So if you have src/components/button.js you can import it anywhere with import Button from 'components/button'.

For more information check out the documentation.

[delaaxe]

@rovansteen How do we import using import 'src/components/xxx' instead? Is there a supported way to configure that without resorting to a separate *.paths.json file?

[zheeeng]

Can we define more customized path aliases like '@src', '@components', '@config', '~src', '~components', '--utils' which have been supported by Webpack and tsconfig.json many years and widely used?

[robertvansteen]

We are open to adding support for aliases in a future release. But right now it’s limited to baseUrl only.

[ConAntonakos]

We are open to adding support for aliases in a future release. But right now it’s limited to baseUrl only.

Awesome! This would be amazing, and I wonder if it'll be easier with this jsconfig.json config.

[vishal423]

In one of my sample projects, I use eslint-config-airbnb preset, and after migration to create-react-app v3.0, I have to also include below in .eslintrc configurations to resolve lint errors on absolute imports in vscode (please note that build and start scripts works fine). Is that documented or am I missing something?

 "settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
}

[BANG88]

If you have a tsconfig.paths.json before you should remove it and put compilerOptions configurations inside tsconfig.json. This took me 20 minutes to make it work.

[silltho]

@rovansteen How do we import using import 'src/components/xxx' instead? Is there a supported way to configure that without resorting to a separate *.paths.json file?

We are facing the same issue, does someone have an idea how to fix this?

[delaaxe]

@silltho Check this comment it worked like a charm for me and others: #5118 (comment)