Need support for Typescript Project references

[ashish-g-lahane]

Recently typescript has added the feature of project references:

https://www.typescriptlang.org/docs/handbook/project-references.html

In the projects created with create-react-app (with --typescript switch), we are not able to use this feature of typescript because babel complains that we cannot refer files for compiling which are outside the 'src' folder.

I know that there are other workarounds such as

• publishing the other projects as modules to the npm repository and then we can install them in the create-react-app
• we can play around with 'npm link', but this approach is not clean. We have to simulate the project references, instead of using the actual references feature of typescript with this approach.
• otherwise, we can eject create-react-app, and then customize the options.
• last option is to do away with create-react-app and build the tool-chain from scratch, which I tried and made it to work with ts-loader instead of babel. In this approach, I had to set the 'projectReferences=true' option for the ts-loader inside webpack.config.js. This worked smoothly. But then I'm loosing on create-react-app, which I don't want.

But all these ways are not clean and involve the trade-off between something or the other.

Having the C# and Java background, I'm pretty much used to the concept of project references. Many will suggest to not go this route, but I do need it. If it was not useful enough, typescript wouldn't have come up with it in the first place.

Also, I'm new to the web development world (just a month old), so pardon me for my lack of knowledge and if I'm asking for something very trivial and already exists.

Thanks
-Ashish

[heyimalex]

I appreciate the thought out issue. I think this is partially a duplicate of #5563 insofar as it's the reason you're getting the current error.

But I'm also not sure it would fix anything. I'm not very familiar with project references, but they look like they introduce new module resolution logic. The way we compile typescript is more complex than just calling tsc, so introducing support will probably not be so trivial. Swapping plugin-transform-typescript for ts-loader would be a major change.

All that to say I'm not sure this will land without someone doing the legwork.

[ashish-g-lahane]

I appreciate the thought out issue. I think this is partially a duplicate of #5563 insofar as it's the reason you're getting the current error.

But I'm also not sure it would fix anything. I'm not very familiar with project references, but they look like they introduce new module resolution logic. The way we compile typescript is more complex than just calling tsc, so introducing support will probably not be so trivial. Swapping plugin-transform-typescript for ts-loader would be a major change.

All that to say I'm not sure this will land without someone doing the legwork.

Thanks a lot Alex (heyimalex).

[ashish-g-lahane]

Hi CRA team, can we please prioritise this feature? We need it as soon as possible.

About the work involved, it may boil down to the support from babel for project references and then CRA just incorporating that option inbuilt. For example, (excerpt from my original post from the top)

---

last option is to do away with create-react-app and build the tool-chain from scratch, which I tried and made it to work with ts-loader instead of babel. In this approach, I had to set the 'projectReferences=true' option for the ts-loader inside webpack.config.js. This worked smoothly. But then I'm loosing on create-react-app, which I don't want.

---

So if the ts-loader can support it, I wonder why babel is taking so long to support it? Or maybe, babel already supports it and CRA just needs to use that option?

[heyimalex]

Like many oss projects, CRA is maintained mostly by volunteers. If you want this to land soon, you probably need to do the work.

[ashish-g-lahane]

Oh, got that. Thanks again Alex.

[kirill-konshin]

API support has been released in 3.6: https://devblogs.microsoft.com/typescript/announcing-typescript-3-6/#apis-to-support-build-and-incremental

ts-loader project supports the flags since version 6.1.0: https://github.com/TypeStrong/ts-loader/releases/tag/v6.1.0

[tommedema]

@kirill-konshin that seems great but how would we benefit from this in CRA?

Meanwhile is there a workaround to use typescript references in a CRA app?

[kirill-konshin]

There is a workaround to run tsc --build && (tsc --build --watch & react-scripts start): build, then run watch & start in parallel.

This is fine if referenced project is using incremetal: true then performance will not be as bad. The problem is that app itself will be also built, so probably a separate tsconfig with references is needed.

Direct benefit is that if CRA is part of monorepo project, which also has a library package and React Native, so that library code is shared between Web and Native. In this case users have to manually build & watch library separately somehow instead of just relying on TSC functionality which can build all upstream projects if necessary.

[Toub]

Or should we create an issue about typescript 3.6 migration?

[Bessonov]

Need this feature as well. Current state of monorepo + typescript isn't very satisfying, because with different approaches we run in different errors. Currently, we must create es5 modules to satisfy react, but even with incremental builds, use --watch is very slow for every change and makes tree-shaking difficult.

As stated in #7807 (comment), current tooling must support project references. Can someone with knowledge of this tooling create appropriate issues in projects?

[DakotaLarson]

I just posted a future tumbleweed about this: https://stackoverflow.com/questions/59555827/sharing-code-between-typescript-projects-with-react.

I got a partial solution using customize-cra.

const { override, removeModuleScopePlugin, getBabelLoader } = require("customize-cra");
const path = require("path");

const addCommon = (config) => {
  const loader = getBabelLoader(config, false);
  const commonPath = path.normalize(path.join(process.cwd(), "../common")).replace(/\\/g, "\\");
  loader.include = [loader.include, commonPath];
  return config;
};
module.exports = override(
  addCommon,
  removeModuleScopePlugin(),
);

I don't have intellisense, (hence the question), but this might be useful to someone. It essentially includes the common folder along with src for babel-loader and removes ModuleScopePlugin. Apparently ts-loader supports project references when the option is enabled.
I tried tinkering with trying to get ts-loader integrated, but I found this "solution" first.
A cleaner solution is certainly appreciated!

[ivankoleda]

Seem like ForkTsCheckerWebpackPlugin which is used by CRA for typechecking is going to add support of project references pretty soon TypeStrong/fork-ts-checker-webpack-plugin#187 (comment)