Cannot write file because it would overwrite input file TS


Borislav Hadzhiev

Mon Mar 14 20222 min read


Photo by Toni Hukkanen

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.

{ "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.

The next thing you should make sure is that you are not importing anything from your build directory. When using auto-imports, your IDE might have glitched and imported something from your dist or build directory.

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):

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.

The next thing you need to make sure is - you don't have any circular dependencies.

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.

When using monorepos, make sure you don't have any imports where you reference the package name when importing members of the same package.

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.

{ "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'.

Use the search field on my Home Page to filter through my more than 1,000 articles.