File is not under 'rootDir' error in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 18, 2022

banner

Photo from Unsplash

File is not under 'rootDir' error in TypeScript #

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
typescript └──src └── index.ts └── another-file.ts

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

tsconfig.json
{ "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
// ⛔️ 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).

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

shell
typescript └──src └── index.ts └── another-file.ts

Now I can import the file without getting any errors.

index.ts
import { Sizes } from './another-file'; // 👇️ { Small: 'S', Medium: 'M', Large: 'L' } console.log(Sizes);

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

shell
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
{ "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
// ✅ Works fine now import { Sizes } from '../another-file'; // 👇️ { Small: 'S', Medium: 'M', Large: 'L' } console.log(Sizes);

If I re-run my build command I can see that my build folder has the following structure now.

shell
typescript └── build └── src └── index.js └── another-file.js

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

Conclusion #

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.