Cannot write file because it would overwrite input file TS

Cannot write file because it would overwrite input file TS #

The error "Cannot write file because it would overwrite input file" occurs when we haven't specified the outDir directory in the exclude array in the tsconfig.json file. To solve the error, make sure to exclude your build directory from being type checked and compiled.

Other common reasons the error occurs:

1. Importing from the build directory - Note that VSCode sometimes auto-completes from wrong sources.
2. Having circular dependencies, especially when using monorepos.

The first thing you should do is make sure the build directory of your project is excluded. Open our tsconfig.json file and look at your outDir setting.

Copied!
{
  "compilerOptions": {
    "outDir": "build",
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build/**/*"]
}

The build directory is where TypeScript will output the emitted files in the config above. Make sure you have added the specified outDir to the exclude array like we have in the example.

You might want to restart your IDE as you troubleshoot, because, for example, VSCode often glitches and needs a reboot.

Once you have excluded your build directory, try deleting it an re-run your build step.

You can use the search functionality in your IDE, e.g. ctrl + shift + f to look for imports that look like the following (depending on how your outDir is named):

Copied!
import {myFunction} from '../../../dist/my-folder/my-function'

import {myFunction} from '../../../build/my-folder/my-function'

If you spot any imports from your build directory, update them and restart your IDE.

A circular dependency is when 2 files depend on one another. For example file A imports from file B and file B imports from file A.

This is very problematic, especially when using monorepos. You might have 2 packages that depend on one another and be mixing up imports.

For example, make sure you don't have imports like - import {myFunction} from '@same-package/my-function'. Instead, you should use a relative import in the same package, e.g. import {myFunction} from './my-function'.

If the error still persists, try setting the allowJs option to false in your tsconfig.json file.

Copied!
{
  "compilerOptions": {
    "allowJs": false,
    // ... other options
  },
}

The allowJs option allows files with .js and .jsx extensions to be imported in your project.

This is often an issue when importing files by mistake from a path like some build directory.

If the error persists, make sure you haven't imported your root index.ts file by using a relative import like import {myFunction} from '../../../'. Try changing the import to import {myFunction} from '../../../index'.