Skip to content

support for custom tsconfig through TSCONFIG_BUILD for enabling monorepo path alias usage#12711

Open
CarlRibbegaardh wants to merge 2 commits into
react:mainfrom
CarlRibbegaardh:feature/tsconfig-config
Open

support for custom tsconfig through TSCONFIG_BUILD for enabling monorepo path alias usage#12711
CarlRibbegaardh wants to merge 2 commits into
react:mainfrom
CarlRibbegaardh:feature/tsconfig-config

Conversation

@CarlRibbegaardh
Copy link
Copy Markdown

@CarlRibbegaardh CarlRibbegaardh commented Sep 6, 2022

Added support for alternative tsconfig through TSCONFIG_BUILD env variable.
It's intended for using a custom tsconfig in a monorepo setting.

TSCONFIG_BUILD=tsconfig.build.json

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

Carl Ribbegårdh added 2 commits September 3, 2022 23:29
Advanced monorepo configuration; separate tsconfig file for building vs editing.
assign typescript configFile
@CarlRibbegaardh CarlRibbegaardh changed the title Feature/tsconfig config support for custom tsconfig through TSCONFIG_BUILD for monorepo path alias usage Sep 8, 2022
@CarlRibbegaardh CarlRibbegaardh changed the title support for custom tsconfig through TSCONFIG_BUILD for monorepo path alias usage support for custom tsconfig through TSCONFIG_BUILD for enabling monorepo path alias usage Sep 8, 2022
@CarlRibbegaardh
Copy link
Copy Markdown
Author

@mrmckeb Any chance of a review?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants