Fix TS18003 Error in TypeScript Configurations

TypeScript is a powerful superset of JavaScript that enhances the development process by allowing developers to use static types and compile-time checks. However, like any other programming environment, developers can encounter issues while working with TypeScript. One common error that many face is TS18003: No inputs were found in config file ‘tsconfig.json’. Understanding this error and how to troubleshoot it can save you time and frustration. In this article, we will explore the root causes of this error, how you can fix it, and best practices for setting up your TypeScript environment.

Understanding the Error TS18003

Error TS18003 signifies that TypeScript’s compiler is unable to locate any input files specified in your ‘tsconfig.json’ configuration file. This could result from multiple factors, including misconfiguration or missing files in your project structure. It’s essential to understand the context to effectively resolve the issues related to this error.

Common Causes of TS18003

No include or files specified: If you have not defined any files or glob patterns in the ‘include’ or ‘files’ sections of your ‘tsconfig.json’, the TypeScript compiler will not know which files to process.
Incorrectly set paths: If the paths provided in the ‘include’ or ‘files’ sections do not match the actual folder structure or file names, the compiler will return this error.
Empty Source Directory: If the directory you are compiling is empty or lacks TypeScript files, you will encounter this error.
File types mismatch: If your project is supposed to only include ‘.ts’ files, but you reference a ‘.js’ file, it may also lead to this issue.
Exclusions overriding includes: If you have set up ‘exclude’ in your configuration, it may lead to files being excluded from the compilation that you intended to include.

Setting Up Your TypeScript Project

Before diving into troubleshooting, it is important that you have a correct setup for your TypeScript project. Let’s look at how to create a ‘tsconfig.json’ file properly and include the right configurations.

Creating a Basic tsconfig.json File

A good starting point for most TypeScript projects is a simple ‘tsconfig.json’ file that includes your source files. Here is an example of a basic structure:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

This configuration provides a robust base with the following options:

compilerOptions: This section specifies how the compiler behaves.
target: Sets the JavaScript version for the output files.
module: Specifies the module system to use (commonjs is often used for Node.js).
strict: Enables strict type-checking options.
include: Indicates which directories or files to include.
exclude: Specifies which files or directories to ignore (e.g., tests and node_modules).

Troubleshooting TS18003

Now that we understand the basics of setting up our TypeScript project, let’s troubleshoot the error TS18003 step-by-step.

Step 1: Verify Your tsconfig.json File

Start by opening your ‘tsconfig.json’ file and ensuring that the ‘include’ field correctly points to the TypeScript files. Consider the following scenarios:

If your TypeScript files are located under ‘src’, ensure you have configured your ‘include’ section as follows:


{
    "include": [
        "src/**/*" // This includes all .ts files inside the src folder and its subdirectories.
    ]
}

If your files are in a different directory, update the paths accordingly. For example, if your files are located in a ‘src/app’ directory, use:


{
    "include": [
        "src/app/**/*" // This ensures that only files in app folder are compiled.
    ]
}

Step 2: Check for Empty Directories

Next, confirm that the directories specified in your ‘include’ section contain TypeScript files. If they are empty, you will inevitably encounter the TS18003 error. Empty directories should simply be populated with your .ts or .tsx code files.

Step 3: Resolve File Type Conflicts

Ensure that all your source files are of the correct type. If your configuration anticipates TypeScript files, but you have mistakenly included JavaScript files, TypeScript will not find the inputs it needs. For instance:

The presence of .js files shouldn’t conflict unless specified in your include paths.
To ensure only .ts files are part of the compilation process, you could clear out or modify the include as follows:


{
    "include": [
        "src/**/*.ts" // Only include TypeScript files in the source paths
    ]
}

Step 4: Check for Exclude Overrides

A common pitfall is setting exclusions that unintentionally cover inputs. For instance:


{
    "exclude": [
        "src/excluded-folder/**/*" // This will exclude *all* files in excluded-folder
    ]
}

In this case, ensure that your intent aligns with the contents of your exclude section. You may need to elaborate your exclusion criteria or tailor your include to ensure essential files are not overlooked.

Step 5: Running the Compiler

Now that you’ve made the necessary adjustments to your ‘tsconfig.json’, run the TypeScript compiler to verify the changes:


$ tsc --project tsconfig.json

This command explicitly points to the configuration file you’re working with. If everything was set up correctly, you should no longer see the TS18003 error. If the error persists, reassess your configurations and ensure all aspects covered in the previous steps were elaborated on correctly.

Examples in Action

Let’s walk through some detailed code samples that can aid in better understanding TypeScript configuration and troubleshooting common issues.

Case Study: A Simple Node.js Project

Consider a scenario where you are setting up a basic TypeScript project for a Node.js application. The directory structure might look like this:


project-root/
├── src/
│   ├── index.ts
│   └── utils.ts
└── tsconfig.json

In this setup, your ‘tsconfig.json’ could be structured as follows:


{
    "compilerOptions": {
        "target": "es6", // You want ES6 for modern applications.
        "module": "commonjs",
        "outDir": "./dist", // Compiled files will go to the dist directory
        "rootDir": "./src", // Indicates where the source files are located
        "strict": true
    },
    "include": [
        "src/**/*.ts" // Makes sure all TypeScript files inside src are included
    ],
    "exclude": [
        "node_modules", // Excludes node_modules to avoid unnecessary files
        "**/*.spec.ts" // Excludes test files for simplicity
    ]
}

This setup not only ensures compilation works as intended but also organizes the output. You can personalize it further by adjusting the output directory or using different module systems.

Dealing with More Complex Projects

If your project includes multiple types of files (like React files with .tsx extensions), your configuration might need to broaden the scope:


{
    "compilerOptions": {
        "target": "esnext",
        "module": "commonjs",
        "jsx": "react", // Compiling JSX syntax for React 
        "outDir": "./build",
        "rootDir": "./src",
        "strict": true
    },
    "include": [
        "src/**/*" // Include everything under src, .ts and .tsx files
    ],
    "exclude": [
        "node_modules",
        "**/*.test.ts" // Exclude test files
    ]
}

Summary and Key Takeaways

In summary, error TS18003 occurs when TypeScript cannot find input files specified in the ‘tsconfig.json’ file. Troubleshooting this error involves:

Verifying your ‘tsconfig.json’ settings, especially the include and exclude options.
Ensuring that the directories are populated with the intended TypeScript files.
Checking any constraints introduced by how files are organized or excluded.

Effective configuration management is crucial in TypeScript development. By applying best practices and regularly reviewing your project structure and configurations, you can mitigate the chances of encountering TS18003 and other related errors.

We encourage you to try setting up your own TypeScript project following the guidance in this article. Test the configurations, experiment with the code snippets provided, and don’t hesitate to ask questions in the comments. Building a strong understanding of how TypeScript configurations work will go a long way in your development journey.

For further reading and deeper insights into TypeScript project setups, consider looking at the official TypeScript documentation at TypeScript Handbook.

Troubleshooting TS18003: Fixing TypeScript Configuration Errors