Borislav Hadzhiev
Mon Mar 14 2022·2 min read
Photo by Coco Winter
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.
// ⛔️ 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.
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.
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:
// @ts-ignore
comments above your importsIf this still doesn't work for you, you have to use // @ts-ignore
comments
above the imports to ignore the error.
// @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.
/* eslint-disable @typescript-eslint/ban-ts-comment */ // @ts-ignore import { sum } from './another-file.ts';
Or you could disable it in your eslintrc
file.
{ "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.