Fix - An import path cannot end with a '.ts' extension in TS

Fix - An import path cannot end with a '.ts' extension in TS #

The error "An import path cannot end with a '.ts' extension" occurs when we include the extension when importing TypeScript files. To solve the error, remove the extension from your TypeScript imports.

Here is an example of how the error occurs.

Copied!
// ⛔️ Error: An import path cannot end with a '.ts'
// extension. Consider importing './another-file' instead.ts(2691)
import { sum } from './another-file.ts';

To solve the error, remove the .ts extension when importing files.

Copied!
import { sum } from './another-file';

The TypeScript compiler does not change import specifiers when transpiling your TypeScript code to JavaScript, so if you had an import like import {sum} from './another-file.ts', the path would remain with a .ts extension even after compilation.

An alternative approach, if you use webpack, is to try adding the extensions you need to resolve to your webpack.config.js file.

Copied!
module.exports = {
  //... rest
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

If you use Deno, you have to specify extensions when importing files, so you have 2 options:

• Install the VSCode extension for Deno
• Use // @ts-ignore comments above your imports

If this still doesn't work for you, you have to use // @ts-ignore comments above the imports to ignore the error.

Copied!
// @ts-ignore
import { sum } from './another-file.ts';

If you have a linter rule that doesn't allow you to use TS comments in your code, you can disable it for the file.

Copied!
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-ignore
import { sum } from './another-file.ts';

Or you could disable it in your eslintrc file.

Copied!
{
  "rules": {
    "@typescript-eslint/ban-ts-comment": "off"
  },
}

There is a Github issue regarding the ability to suppress the "An import path cannot end with a '.ts' extension" error, but there hasn't been much movement in the past 4 years.