An import path cannot end with a ‘.tsx’ extension in Typescript

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

To solve the error “An import path cannot end with a ‘.tsx’ extension” in Typescript, you can remove the extension when importing in Typescript. So how does it work? – Let’s go into detail.

The reason of the error “An import path cannot end with a ‘.tsx’ extension” in Typescript

This error happens when you import some Typescript files when working in React project, but you the add tsx extension.

Example of how the error happens:

import AnotherFile from './anotherFile.tsx';

The error:

TS2691: An import path cannot end with a '.tsx' extension. Consider importing './anotherFile.js' instead.

As you see, I imported anotherFile file, including the tsx extension that made the error happen.

The solutions to fix the error “An import path cannot end with a ‘.tsx’ extension” in Typescript

Remove the tsx extension

To solve the error, you can simply remove the tsx extension.

Example:

import AnotherFile from './anotherFile';

import React from 'react'
 
type Props = {}
 
import React from 'react'
 
type Props = {}
 
const AnotherFile = (props: Props) => {
  return (
    <div style={{width:'250px'}}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed vero quae, facere earum perspiciatis, corporis distinctio odit quis possimus pariatur provident magnam sint tempore, fugiat eligendi? Ullam odio officiis explicabo?</div>
  )
}
 
export default AnotherFile

Output:

When you try to import some file, just by simply pressing the first letter of the file’s name, you can get a list of all files you can import. Then IDE will accomplish all the work. It is called autofill, and of course, IDE will fill the code without the tsx extension.

Example:

If IDE does not show the list automatically, you can try to press ‘control + space’.

Keep the tsx extension

If, for some reasons, you want to keep the tsx extension to make your code clear and you are using webpack, you can set it in the “webpack.config.js” file.

Example:

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

With this setting, you can import files with both ts and tsx files.

Ignore the code

There are some ways to ignore the code line in Typescript. One of them is the “@ts-ignore” command.

Example:

// @ts-ignore
import anotherFile from './anotherFile.tsx';

The @ts-ignore command will tell the Typescript to ignore the following code line. So that Typescript won’t occur errors, but it might lead to errors in your project.

You can read more about how to ignore errors in Typescript files here.

Summary

In this article, I showed you how to solve the error “An import path cannot end with a ‘.tsx’ extension” in Typescript. I recommend removing the tsx extension if you do not have any special conditions for your code. Good lucks!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *