An import path cannot end with a '.tsx' extension in TS

avatar

Borislav Hadzhiev

Last updated: Mar 14, 2022

banner

Photo from Unsplash

An import path cannot end with a '.tsx' extension in TS #

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

Here is an example of how the error occurs.

index.ts
// ⛔️ An import path cannot end with a '.tsx' extension. // Consider importing './App.js' instead.ts(2691) import App from './App.tsx';

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

index.ts
import App from './App';

The TypeScript compiler does not change import specifiers when transpiling your TypeScript code to JavaScript, so if you had an import like import App from './App.tsx', the path would remain with a .tsx extension even after compilation.

If you need to keep the extensions for some reason and you use webpack, try adding the extensions you need to resolve to your webpack.config.js file.

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

If this still doesn't work for you, you and you need to keep the extensions, you could use // @ts-ignore comments above the imports to ignore the error.

index.ts
// @ts-ignore import App from './App.tsx';

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.

index.ts
/* eslint-disable @typescript-eslint/ban-ts-comment */ // @ts-ignore import App from './App.tsx';

Or you could disable the rule in your eslintrc file.

.eslintrc
{ "rules": { "@typescript-eslint/ban-ts-comment": "off" }, }
If you decide to ignore the error, make sure you have a build step in place that removes the extensions. If your compiled JavaScript files have imports with .tsx extensions, your app won't work.

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

Conclusion #

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.