'package.json' is not under 'rootDir'

Question

I'm trying to import package.json in my TypeScript application:

import packageJson from '../package.json'; 

My tsconfig.json contains the following:

{   "compilerOptions": {     "rootDir": "./src/"     "outDir": "./dist/",     "baseUrl": ".",     "resolveJsonModule": true   } } 

The problem is that when I compile this, I get

error TS6059: File '/path/to/package.json' is not under 'rootDir' '/path/to/app/src/'. 'rootDir' is expected to contain all source files.

I'm not sure I understand the issue, because both ./src/ and /.dist have the same parent .., so TypeScript could just leave alone the import '../package.json' and it would work from either rootDir or outDir.

Anyway, I've tried the following, with unsatisfactory results:

• remove rootDir - compilation works, but the dist will contain dist/src, which I don't want
• remove outDir - then src gets polluted with .js files (and .js.map if sourceMap was true)
• add @ts-ignore - compilation stops the the file that imports ../package.json

What's the workaround for this limitation, to keep generated files in dist, and allow importing from the parent directory of rootDir?

Answer 1

This is possible, and it turns out, not hard.

The reason the solution is not obvious is because typescript relies on the rootDir to decide the directory structure of the output (see this comment from Typescript's bossman), and only code included in the output or in package dependencies can be imported.

• If you set rootDir to the root of your project, package.json gets emitted to the root of outDir and can be imported. But then your compiled src files get written to outDir/src.
• If you set rootDir to src, files in there will compile to the root of outDir. But now the compiler won't have a place to emit package.json, so it issues "an error because the project appears to be misconfigured" (bossman's words).

solution: use separate Typescript sub-projects

A Typescript project is defined by a tsconfig file, is self-contained, and is effectively bounded by its rootDir. This is a very good thing, as it lines up with principles of encapsulation.

You can have multiple projects (e.g. a main and a set of libs) each in their own directory and with their own tsconfig. Dependencies between them are declared in the tsconfig file using Typescript Project References.

I admit, the term "projects" is a poor one, as intuitively it refers to the whole shebang, but "modules" and "packages" are already taken in this context. Think of them as "subprojects" and it will make more sense.

We'll treat the src directory and the root directory containing package.json as separate projects. Each will have its own tsconfig file.

1. Give the src dir its own project.

   ./src/tsconfig.json:

   {   "compilerOptions": {     "rootDir": ".",     "outDir": "../dist/",     "resolveJsonModule": true   },   "references": [      // this is how we declare a dependency from     { "path": "../" }  // this project to the one at the root dir`   ] }    

2. Give the root dir its own project.

   ./tsconfig.json:

   {   "compilerOptions": {     "rootDir": ".",     "outDir": ".",  // if out path for a file is same as its src path, nothing will be emitted     "resolveJsonModule": true,     "composite": true  // required on the dependency project for references to work   },   "files": [         // by whitelisting the files to include, TS won't automatically     "package.json"   // include all source below root, which is the default.   ] } 

3. run tsc --build src and voilà!

   This will build the src project. Because it declares a reference to the root project, it will build that one also, but only if it is out of date. Because the root tsconfig has the same dir as the outDir, tsc will simply do nothing to package.json , the one file it is configured to compile.

this is great for monorepos

• You can isolate modules/libraries/sub-projects by putting them in their own subdirectory and giving them their own tsconfig.

• You can manage dependencies explicitly using Project References, as well as modularize the build:

  From the linked doc:

  • you can greatly improve build times

  A long-awaited feature is smart incremental builds for TypeScript projects. In 3.0 you can use the --buildflag with tsc. This is effectively a new entry point for tsc that behaves more like a build orchestrator than a simple compiler.

  Running tsc --build (tsc -b for short) will do the following:

  • Find all referenced projects
  • Detect if they are up-to-date
  • Build out-of-date projects in the correct order

  Don’t worry about ordering the files you pass on the commandline - tsc will re-order them if needed so that dependencies are always built first.

  • enforce logical separation between components

  • organize your code in new and better ways.

It's also very easy:

• src/tsconfig.json

  Even if you have no code at the root, this tsconfig can be where all the common settings go (the others will inherit from it), and it will enable a simple tsc --build src to build the whole project (and with --force to build it from scratch).

  {   "compilerOptions": {     "rootDir": ".",     "outDir": "../build/",     "resolveJsonModule": true,     "composite": true   },   // this root project has no source of its own   "files": [],   // but building this project will build all of the following:   "references": [     { "path": "./common" }     { "path": "./projectA" }     // include all other sub-projects here     ] } 

  • src/common/tsconfig.json

    Because common has no references, imports are limited to targets within its directory and npm_modules. You could even restrict the latter, I believe, by giving it its own package.json.

        {      "compilerOptions": {         "rootDir": ".",         "outDir": "../../build/common",         "resolveJsonModule": true,         "composite": true       }     } 

  • src/projectA/tsconfig.json

    projectA can import common because of the declared reference.

        {       "compilerOptions": {         "rootDir": ".",         "outDir": "../../build/libA",         "resolveJsonModule": true,         "composite": true       },       "references": [         { "path": "../common" }       ]     } 

Answer 2

We can set resolveJsonModule to false and declare a module for *.json inside typings.d.ts which will require JSON files as modules and it will generate files without any directory structure inside the dist directory.

Monorepo directory structure

monorepo\ ├─ app\ │  ├─ src\ │  │  └─ index.ts │  ├─ package.json │  ├─ tsconfig.json │  └─ typings.d.ts └─ lib\    └─ package.json 

app/typings.d.ts

declare module "*.json"; 

app/src/index.ts

// Import from app/package.json import appPackageJson from '../package.json';  // Import from lib/package.json import libPackageJson from '../../lib/package.json';  export function run(): void {   console.log(`App name "${appPackageJson.name}" with version ${appPackageJson.version}`);   console.log(`Lib name "${libPackageJson.name}" with version ${libPackageJson.version}`);   }  run(); 

app/package.json contents

{   "name": "my-app",   "version": "0.0.1",   ... } 

lib/package.json contents

{   "name": "my-lib",   "version": "1.0.1",   ... } 

Now if we compile the project using tsc, we'll get the following dist directory structure:

app\ └─ dist\    ├─ index.d.ts    └─ index.js 

And if we run it using node ./dist, we'll get the output from both app and lib package.json information:

$ node ./dist App name "my-app" with version 0.0.1 Lib name "my-lib" with version 1.0.1 

You can find the project repository here: https://github.com/clytras/typescript-monorepo