support for custom tsconfig through TSCONFIG_BUILD for enabling monorepo path alias usage#12711
Open
CarlRibbegaardh wants to merge 2 commits into
Open
support for custom tsconfig through TSCONFIG_BUILD for enabling monorepo path alias usage#12711CarlRibbegaardh wants to merge 2 commits into
CarlRibbegaardh wants to merge 2 commits into
Conversation
added 2 commits
September 3, 2022 23:29
Advanced monorepo configuration; separate tsconfig file for building vs editing.
assign typescript configFile
This was referenced Sep 6, 2022
Author
|
@mrmckeb Any chance of a review? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Added support for alternative tsconfig through TSCONFIG_BUILD env variable.
It's intended for using a custom tsconfig in a monorepo setting.
React-scripts doesn't play with path aliases. But in monorepos a lot of people go a long way to have them.
The end goal is to have a tsconfig.json that inherits a base tsconfig with all internal package folders defined in order to facilitate easy navigation from the outermost projects into components inside library projects. But by doing that it causes the build process to navigate through the source files instead of the build/dist folders of the library project builds. This is usually solved by updating the tsconfig on the fly before react-scripts build or copying between build and edit mode configs.
This PR gives the possibility for react-scripts to use a dedicated tsconfig.build.json instead of the tsconfig.json used by the editor.
This is version 2 of this PR (which is incorrectly marked as merged and almost the same diff is available here)
Here's a super simple sample to show how it works. It's the turborepo "with-create-react-app" that originally suffers from not being able to navigate to the components through CTRL-Click in VSCode. You can try out that behavior in /apps/doc/App.tsx and navigate to Link and compare with /apps/web/App.tsx. The difference is that the latter has a specific build tsconfig that is working as create-react-app expects.
Sample:
https://github.com/CarlRibbegaardh/turborepo/tree/tsconfig-build-sample/examples/with-create-react-app
Changes:
vercel/turborepo@main...CarlRibbegaardh:turborepo:tsconfig-build-sample
Things to try:
1 build whole project: yarn build
2 cd ./apps/web
3 yarn build
4 rename ./apps/web/tsconfig.json to something invalid and yarn build inside that folder again
5 go to Link.tsx and make the file content invalid, then yarn build from apps\web (should still work since dist/index.js is used) (building from top would rebuild ui first
6 building from top will of course trigger build errors as usual
To compare with how similar situations are solved by ejecting or craco, google search for:
yarn workspaces create react app
create react app path alias