12

I'm working on converting a large(ish) monorepo into TypeScript for a client, however, I'm pretty new to TS myself and have run into an error that I can't find an obvious fix for.

TS6059: File '[path to repo root]/packages/config/globals.ts' is not under 'rootDir' '[path to repo root]/packages/components/src'. 'rootDir' is expected to contain all source files.

The globals.ts file isn't supposed to live in the components package, it belongs to the config package so I don't really understand the error.

I have a main tsconfig file in the root of the repo (https://github.com/serge-web/serge/blob/feature/333-game-admin-channel/tsconfig.json) and then each package has it's own tsconfig file which extends that one. The one for the components package is here: https://github.com/serge-web/serge/blob/feature/333-game-admin-channel/packages/components/tsconfig.json

I assume I am extending the tsconfig files in the packages incorrectly or I have used references incorrectly but I can't find the correct way to do this.

Here is a link to the repo if you need to see the structure: https://github.com/serge-web/serge/tree/feature/333-game-admin-channel

CoryCoolguy
  • 1,065
  • 8
  • 18
Alex Foxleigh
  • 1,784
  • 2
  • 21
  • 47

5 Answers5

10

In the end the fix was to remove any reference to rootDir from all files other than the tsconfig.json file in the root (which I left as .).

Alex Foxleigh
  • 1,784
  • 2
  • 21
  • 47
  • While it does solve the problem, don't you think `rootDir` exists for a reason? I have the same issue in my project, but I don't feel like deleting `rootDir` is safe. – Itay Ganor Apr 09 '20 at 13:50
  • It is definitely an irritating answer, yes. rootDir is the pattern that the typescript builder users for the output folder, so removing it means that my build folder doesn't get output the way I wanted it to, however I just added another node script to clean the folder up, it's far from ideal but it does the job. – Alex Foxleigh Apr 15 '20 at 08:26
  • 1
    See [this answer](https://stackoverflow.com/a/61467483/8910547) for info on `rootDir` and using Project Reference. Think will start to make a lot more sense. – Inigo Apr 29 '20 at 01:23
  • I had the same issues as the OP, and once I did the work to convert to Project References, everything just works so much more smoothly! Fair warning, it did take a while for me to understand how to configure everything properly (mainly fixes for my [bad] "workarounds" for gluing things together), but now that that's done, it works great. Faster builds, no conflicts with webpack and ts-loader, retained the ability to jump-to-source in other subrepos (using the [declarationMap](https://www.typescriptlang.org/docs/handbook/project-references.html#declarationmaps) flag), etc. – Venryx Jun 30 '21 at 00:02
4

The only thing that worked for me was explicitly add the package containing foreign code as a dependency in package.json:

{
    "dependencies": {
        "@packages/name": "*"
    }
}

In my setup I'm not using Lerna, just raw Yarn Workspaces with both TypeScript and JavaScript packages.

rrmesquita
  • 466
  • 1
  • 5
  • 15
  • I am trying to make this work in your way. Could you please elaborate a bit more? I do not want to use path aliases, just add my own monorepo projects as dependencies for other subprojects. Is that possible? Thanks! – Tirias Jul 02 '21 at 20:28
  • 2
    @Tirias actually yes. I know two ways of accomplishing that. 1) Upload your monorepo projects to npm then `npm i` them. 2) Use "npm link" to symlink your project as a global npm dep (local only) (https://docs.npmjs.com/cli/v7/commands/npm-link). – rrmesquita Jul 04 '21 at 07:42
  • Worked like a charm without needing to use path aliases and neither path references. Thanks! – Tirias Jul 06 '21 at 05:29
2

I used to have the same problem.

references is the correct way to solve this problem.

My monorepo app file structure is like this:

MyMonorepo
├── lerna.json
├── package.json
├── packages
│   ├── packageA
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.ts
│   │   └── tsconfig-build.json
│   └── packageB
│       ├── package.json
│       ├── src
│       │   └── index.ts
│       └── tsconfig-build.json
├── tsconfig.json
└── yarn.lock

And packageA used some packageB's components.

Config packageA's tsconfig-build.json like this:

{
    "extends": "../../tsconfig.json",
    "include": ["src/**/*"],
    "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "**/demos/*.ts", "**/demos/*.tsx"],
    "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./dist/types",
        "composite": true,
        "emitDeclarationOnly": true,
        "skipLibCheck": true
    },
    "references": [{ "path": "../packageB/tsconfig-build.json" }]
}

That references config solved my problem.

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

Nuxio Ang
  • 33
  • 1
  • 5
1

With me the .ts was found in the typings directory. Changing the extension from filename.ts to filename.d.ts solved the problem. All other files were named this way, it was old code, I have no idea why that one file had the extension .ts and not .d.ts

Marc W
  • 89
  • 1
  • 8
  • Worked! Thank you. Perhaps you were using .ts instead of d.ts because your *d.ts files were not typechecked? That's what happens when --skipLibCheck is used. – Karol Majewski Sep 20 '21 at 19:33
0

With Angular 15 and NX monorepo I noticed that the ts-config.base.json property paths affected on the sequence of the libs of their order. If you have a lib with dependencies of other libs inside you need to put dependencies above the lib which uses them.

paths: [
  @lib/which-use-other-libs,
  @smaller/lib
  @constants/lib
  @lib/which-use-smaller-lib // <- here will be an error, should be before smaller/lib
]
Igor Kurkov
  • 4,318
  • 2
  • 30
  • 31