Cannot use `composite` tsconfig.json setting

[osdiab]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

typescript composite isolatedModules

Environment

  System:    OS: macOS 10.14.2
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
  Binaries:
    Node: 11.4.0 - ~/.nvm/versions/node/v11.4.0/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v11.4.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
    Safari: Not Found
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

1. Run yarn create react-app my-app --typescript
2. add composite: true to tsconfig.json
3. run yarn start, get Option 'composite' cannot be specified with option 'isolatedModules'. TS5053
4. Remove isolatedModules line from tsconfig
5. run yarn start, create-react-app re-adds isolatedModules and you get the same error

Expected Behavior

I could use the composite flag

Actual Behavior

I can't use the composite flag

Reproducible Demo

Above steps will reproduce this, pretty trivial.

This is potentially equally as much a typescript issue, though this is not really big to me—i just want to be able to build all my packages in my monorepo in one command, rather than having a separate invocation of tsc --build for my website package. But thought I'd log the issue here.

[bfricka]

This is not a bug report, it's a feature request. Using CRA + TS for anything but the most basic project setup is not supported currently. For composite projects in particular, there really isn't much support in Webpack at all ATM (@ts-tools/webpack-loader, ts-loader, awesome-typescript-loader, etc.). It's a complicated feature and no one has done the work to properly integrate it yet. So unless you're using tsc, you're out of luck.

Some other loaders can handle more complicated setups. E.g. @ts-tools/webpack-loader can do monorepos, but it has it's own drawbacks that make it problematic (e.g. doesn't play nice w/ downstream loaders).

It's all a bit of a clustf*ck at this point and I'm hoping the TS build landscape looks a bit better in the next year.

[osdiab]

I'm finding in my CRA project that uses tsc -b to reference other shared modules, that it seems to be incorporated into the CRA build just fine - I'll try to make a simple repo that demonstrates it, but both my development server and output production app seem to work fully with project references in a Yarn monorepo. Though maybe I'm missing the incompatibility you're speaking of.

Though yes, I agree that it's a pretty hairy system at the moment.

[bfricka]

@osdiab The monorepo issue occurs with nested linked imports:

Say you have monorepo, with modules a, b, c

a imports b and/or c works fine. a imports b imports c, does not work (cannot find module c). Even though, a can import c, if b imports c, the module resolution doesn't know how to handle it.

ts-tools/webpack-loader handles this by parsing multiple config files as required.

I'm still trying to find a way to make this work w/ CRA that isn't nasty. E.g. I've setup a sample monorepo that demonstrates the issue. The current roadblock is that babel-loader rule limits include to appSrc. If you instead try to pass an array, you'll get errors from modules.js, which does a dumb parse of tsconfig.json / jsconfig.json, and tells you that you cannot set your baseUrl to something outside src.

To get to this point I use typescript to parse the config file properly (ts.readJsonConfigFile, ts.parseJsonSourceFileConfigFileContent), which then derives the baseUrl properly from the project root (b/c this parsing actually handles "extends", instead of just JSON.parse and pulling out compilerOptions).

I've had to move on to other stuff for a bit, but I'll come back to this to figure out why this is the case and if I can work around it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[tommedema]

This is still an issue and should not be closed

[matyasfodor]

I am also looking for a solution to this issue. Current workaround: npm link the shared lib. Drawback: you need to manually compile the lib every time the code changes.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[tommedema]

This is still an issue and should not be closed

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[matyasfodor]

This is still an issue, and would really like if this could be solved 🙏 !

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ArashMotamedi]

Shouldn't be closed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[matyasfodor]

The issue still persist, it would be really nice to have the feature!

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[Toub]

This is not a bug report, it's a feature request. Using CRA + TS for anything but the most basic project setup is not supported currently.

Any chance to enjoy a better CRA typescript support in the near future?

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[matyasfodor]

We still need it, thank you! 🧞‍♂️

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[bfricka]

This bot is such a troll.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[osdiab]

ding dong

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[tommedema]

This is still an issue

On Sun, May 17, 2020 at 08:01 stale[bot] notifications@github.com wrote:

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

—

You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/7147#issuecomment-629812090, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACRAOL2DTUBL2M43R5BLSTRR735PANCNFSM4HSBG7FQ .

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[osdiab]

still a problem

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[osdiab]

still a problem Omar

On Sat, Jul 18, 2020 at 3:13 PM stale[bot] notifications@github.com wrote:

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/7147#issuecomment-660434658, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONU3QRXC5D4UII4UBWKOTR4E4QLANCNFSM4HSBG7FQ .

[tommedema]

What would it take to get someone assigned to this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[osdiab]

Still a problem. Omar

On Sun, Aug 23, 2020 at 8:06 AM stale[bot] notifications@github.com wrote:

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/7147#issuecomment-678706471, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONU3W3LCJJJNUZB5FW5ELSCBFPXANCNFSM4HSBG7FQ .

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[osdiab]

Still a problem Omar

On Oct 4, 2020 at 15:28:51, stale[bot] notifications@github.com wrote:

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/7147#issuecomment-703210137, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONU3QR7K3MSYLYGOUYJL3SJAI2HANCNFSM4HSBG7FQ .

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[osdiab]

Not stale Omar

On Dec 26, 2020 at 04:11:14, stale[bot] notifications@github.com wrote:

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/7147#issuecomment-751283049, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONU3S5754XOMUS7OOKSF3SWTPVDANCNFSM4HSBG7FQ .

[gumT3KBZ9zMY7kzv]

UPDATE: this might now be an answer since the issue author mentioned a "one command" rather than "tsc --build", but nonetheless for some it might be helpful

this is what worked for me

DISCLAIMER: the following is specific for Windows, if you are on Linux make appropriate adjustments

So basically the idea is that you need to compile your composite project and have its output saved in your out-dir folder before you run create-react build

├───bin
│   ├───basics
│   ├───components
│   └───data
├───src
│   ├───basics
│   │   └───tsconfig.json
│   ├───components
│   │   └───tsconfig.json
│   ├───data
│   │   └───tsconfig.json
│   └───tsconfig-base.json
├───package.json
└───tsconfig.json

So you need to modify the build script in package.json

before:

  "scripts": {
    "start": "react-scripts start ",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

after:

  "scripts": {
    "start": "react-scripts start ",
    "build": "node ./node_modules/typescript/bin/tsc --build ./tsconfig.json && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

so what it does it pre-builds your composite project and spits out the results to a local folder (which is bin in my case, set as outDir in all tsconfig.json files involved)

then when create-react compiles the same project the files are already in the bin folder and it doesn't complaint anymore even though it uses --project instead of --build argument

below is the exact configuration

// src/basics/tsconfig.json 
{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        "composite": true,
        "outDir": "../../bin/basics"
    },
    "include": [
        "./**/*.ts",
        "./**/*.tsx"
    ]
}

// src/components/tsconfig.json
{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        "composite": true,
        "outDir": "../../bin/components"
    },
    "include": [
        "./**/*.ts",
        "./**/*.tsx"
    ],
    "references": [
        {
            "path": "../basics/tsconfig.json"
        },
        {
            "path": "../data/tsconfig.json"
        }
    ]
}

// src/data/tsconfig.json 
{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        "composite": true,
        "outDir": "../../bin/data"
    },
    "include": [
        "./**/*.ts",
        "./**/*.tsx"
    ],
    "references": [
        {
            "path": "../basics/tsconfig.json"
        }
    ]
}

// src/tsconfig-base.json 
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  }
}

// tsconfig.json
{
    "extends": "./src/tsconfig-base.json",
    "include": [
        "./src/*.ts",
        "./src/*.tsx"
    ],
    "compilerOptions": {
        "noEmit": true
    },
    "references": [
        {
            "path": "./src/basics/tsconfig.json"
        },
        {
            "path": "./src/data/tsconfig.json"
        },
        {
            "path": "./src/components/tsconfig.json"
        }
    ]
}