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

Set baseUrl from jsconfig.json/tsconfig.json #6656

Merged
merged 22 commits into from Apr 16, 2019
Merged

Set baseUrl from jsconfig.json/tsconfig.json #6656

merged 22 commits into from Apr 16, 2019

Conversation

@rovansteen
Copy link
Contributor

@rovansteen rovansteen commented Mar 15, 2019

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.

packages/react-scripts/scripts/start.js Outdated Show resolved Hide resolved
Loading
Loading
test/fixtures/typescript/tsconfig.json Show resolved Hide resolved
Loading
@zheeeng
Copy link

@zheeeng zheeeng commented Mar 16, 2019

cheers, we neeeeeed it!

Loading

@rovansteen
Copy link
Contributor Author

@rovansteen rovansteen commented Mar 16, 2019

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

Loading

@eladmotola
Copy link

@eladmotola eladmotola commented Mar 16, 2019

@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!

Loading

@rovansteen
Copy link
Contributor Author

@rovansteen rovansteen commented Mar 17, 2019

@eladmotola thanks, that fixed the installs suite!

Loading

@iansu
Copy link
Collaborator

@iansu iansu commented Apr 16, 2019

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

Loading

@rovansteen
Copy link
Contributor Author

@rovansteen rovansteen commented Apr 16, 2019

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

Loading

iansu
iansu approved these changes Apr 16, 2019
@iansu iansu merged commit e7a2d61 into facebook:master Apr 16, 2019
2 checks passed
Loading
v3 automation moved this from In progress to Done Apr 16, 2019
@iansu
Copy link
Collaborator

@iansu iansu commented Apr 16, 2019

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

Loading

@delaaxe
Copy link

@delaaxe delaaxe commented Apr 17, 2019

Congrats!

Loading

@rovansteen
Copy link
Contributor Author

@rovansteen rovansteen commented Apr 17, 2019

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

Loading

@mrmckeb
Copy link
Contributor

@mrmckeb mrmckeb commented Apr 17, 2019

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

Loading

@iansu
Copy link
Collaborator

@iansu iansu commented Apr 17, 2019

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

Loading

@g1eny0ung
Copy link

@g1eny0ung g1eny0ung commented Apr 19, 2019

@rovansteen Thanks to your jobs. 🎉🎉

Loading

@nasreddineskandrani
Copy link

@nasreddineskandrani nasreddineskandrani commented Apr 19, 2019

Thanks for the effort. Really Really appreciated add on.

Loading

@FezVrasta
Copy link
Contributor

@FezVrasta FezVrasta commented Apr 22, 2019

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

Loading

@rovansteen rovansteen deleted the typescript-base-url branch Apr 22, 2019
@rovansteen
Copy link
Contributor Author

@rovansteen rovansteen commented Apr 22, 2019

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

Loading

@delaaxe
Copy link

@delaaxe delaaxe commented Apr 23, 2019

@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?

Loading

@zheeeng
Copy link

@zheeeng zheeeng commented Apr 23, 2019

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?

Loading

@rovansteen
Copy link
Contributor Author

@rovansteen rovansteen commented Apr 23, 2019

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

Loading

@ConAntonakos
Copy link

@ConAntonakos ConAntonakos commented Apr 23, 2019

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.

Loading

@vishal423
Copy link

@vishal423 vishal423 commented Apr 25, 2019

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

Loading

@bang88
Copy link

@bang88 bang88 commented Apr 26, 2019

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.

Loading

@silltho
Copy link

@silltho silltho commented Apr 26, 2019

@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?

Loading

@delaaxe
Copy link

@delaaxe delaaxe commented Apr 27, 2019

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

Loading

@lock lock bot locked and limited conversation to collaborators May 2, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
No open projects
v3
  
Done
Linked issues

Successfully merging this pull request may close these issues.

None yet