“File # is not under ‘rootDir'” error in TypeScript – How to fix it?

In this post, we talk about the “File # is not under ‘rootDir'” error in TypeScript. Let’s see what this error message means and how to solve this problem.

Why do we get this error?

The reason we get the “File # is not under ‘rootDir‘” error message in TypeScript is that we are trying to import a component (or anything else) from a file that is not located under the root directory of your project. In TypeScript, the ‘rootDir‘ option in tsconfig.json allows you to config your project’s root directory.

Suppose here is your project structure and the error happens:

TStutorial
  └──src
     └── index.ts
     └── home.ts
  └──  about.ts

In main.ts:

import { Home} from '../home';
import { About } from '../about';  //error occurs here
// … other lines of code

Output:

Error: File '/Users/Admin/Desktop/TStutorial/about.ts' is not under 'rootDir' '/Users/Admin/Desktop/TStutorial/src'. 'rootDir' is expected to contain all source files.

In this example, the ‘rootDir‘ option is set to the ‘src‘ folder. So this error message in TypeScript means that all the files should be located under the ‘src‘ folder.

Methods to fix the “File # is not under ‘rootDir'” error in TypeScript

We share with you two ways to help you fix this error. Let’s see what these methods are:

Change the file location in your project

The simplest and easiest way to solve this problem is to move all your files inside the root directory before you want to import them.

Continuing with the example above, let’s change it a bit. The directory structure now will look like this:

TStutorial
  └──src
     └── index.ts
     └── home.ts
     └──  about.ts

As you can see, all the files have been moved inside the ‘src‘ folder, which the ‘rootDir‘ option is pointing to. Now you can import between files without worrying about errors.

import { Home} from '../home';
import { About } from '../about';  //the error no longer occurs here
// … other lines of code

Remove the ‘rootDir’ option in tsconfig.json

If you don’t want to change the folder structure in your project, then remove the option ‘rootDir’ in the ‘tsconfig.json‘ file. For instance, here is your ‘tsconfig.json‘ file:

{
  "compilerOptions": {
    "rootDir": "src", //you can try to remove this line
    // ... other options
  }
}

At this point, the TypeScript compiler will automatically implicitly set the ‘rootDir‘ option for your project by following your imports.

Summary

In summary, there are two ways for you to fix the “File # is not under ‘rootDir'” error in TypeScript. You can try to apply one of the methods we provide in this article. Thank you for reading.

Maybe you are interested:

• Property ‘value’ does not exist on type ‘HTMLElement’ in TS
• Solution For The Error: Could not find declaration file for module ‘lodash’ #

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js