File is not under 'rootDir' error in TypeScript [Solved]

# File is not under 'rootDir' error in TypeScript [Solved]

The "File is not under 'rootDir'" error occurs when we try to import something from a file that is not located under the specified rootDir in tsconfig.json.

To solve the error, move the file under the project's root directory or remove the rootDir setting from tsconfig.json.

file is not under rootdir

Assume we have a project with the following folder structure.

shell

Copied!
typescript
  └──src
    └── index.ts

  └──  another-file.ts

And the rootDir option in my tsconfig.json file points to the src directory.

tsconfig.json

Copied!
{
  "compilerOptions": {
    "rootDir": "src",
    // ... rest
  }
}

If I try to import from another-file.ts in my index.ts file, I would get the error, because another-file.ts is not located in the src directory of my project.

index.ts

Copied!
// ⛔️ Error: File '/home/borislav/Desktop/typescript/another-file.ts'
// is not under 'rootDir' '/home/borislav/Desktop/typescript/src'.
// 'rootDir' is expected to contain all source files.ts(6059)
import { Sizes } from '../another-file';

console.log(Sizes);

We are trying to import from a file that is located 1 directory up (outside our specified rootDir).

# Move the file under your specified `rootDir` folder

One way to solve the error is to move the file under your specified rootDir and import it.

shell

Copied!
typescript
  └──src
    └── index.ts
    └── another-file.ts

Now I can import the file without getting any errors.

index.ts

Copied!
import { Sizes } from './another-file';

// 👇️ { Small: 'S', Medium: 'M', Large: 'L' }
console.log(Sizes);

import file without getting any errors

The code for this article is available on GitHub

Here is the example code for another-file.ts.

another-file.ts

Copied!
export enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

I've also written an article on how to import values from another file in TS.

# Alternatively, remove the `rootDir` option

If you have to stick to the previous file structure of:

shell

Copied!
typescript
  └──src
    └── index.ts

  └──another-file.ts

You can try to remove the rootDir option from your tsconfig.json.

The rootDir setting defaults to the largest common path of all non-declaration input files.

When TypeScript compiles files, it keeps the same directory structure in the output directory as exists in the input directory.

Remove the rootDir option from your tsconfig.json file.

tsconfig.json

Copied!
{
  "compilerOptions": {
    // "rootDir": "src", // 👈️ remove this
    // ... rest
  }
}

Now the TypeScript compiler will automatically determine the rootDir setting for your project by following your imports.

index.ts

Copied!
// ✅ Works fine now
import { Sizes } from '../another-file';

// 👇️ { Small: 'S', Medium: 'M', Large: 'L' }
console.log(Sizes);

If I rerun my build command I can see that my build folder has the following structure now.

shell

Copied!
typescript
  └── build
    └── src
      └── index.js
    └── another-file.js

The code for this article is available on GitHub

Notice that TypeScript kept the same directory structure inside of the build directory after it compiled the files.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

File is not under 'rootDir' error in TypeScript [Solved]