Many different options exist for fixing the “Missing file extension ‘tsx’ error”. Once it is fixed, you will be able to import from a TypeScript file. Often this error is present in create-react-app
default setup when you try to use TypeScript files.
After a lot of testing, I found three simple methods for fixing the “Missing file extension ‘tsx’ error”. This seems like something that should ‘just work’ when the @typescript-eslint
plugin is enabled, and it’s frustrating that was difficult to fix.
Here are the three methods summarized (#2 is the best with create-react-app
):
- Add
resolve.extensions: [".tsx"]
towebpack.config.js
– only works if you have access towebpack.config.js
- Add
extends: ["airbnb-typescript"]
to .eslintrc.json – only works if you are usingeslint-config-airbnb
- Use
eslint-import-resolver-typescript
plugin – this option requires more configuration but works when the above two options are not available
These three options are explained in more detail below. I include a fully configured .eslintrc.json
file for the second and third options.

How to Allow tsx File Extensions Using webpack.config.js
If you can access webpack.config.js
, then you can support .tsx
extensions with the following code:
resolve: {
extensions: ['.tsx', '.ts', '.js'],
}
(See webpack docs on tsx support here).
The problem is, if you generate your app using create-react-app then webpack.config.js is hidden in node modules.
Three options for overriding the config exist even if you use create-react-app
:
- Create React App Configuration Override (craco) – create your own config file that overrides CRA configs.
- react-app-rewired – similar to craco in that you can add configs and plugins to the app generated by CRA
- Call
npm run eject
in your CRA app – ejects your webpack.config.js so you can tweak it. Probably this is not needed anymore because all other methods in this post are better.
How to Allow tsx File Extensions Using eslint-config-airbnb-typescript (Best with create-react-app)
eslint-config-airbnb-typescript
is a plugin that adds TypeScript support to AirBnB’s ESLint configuration. Follow the steps from the documentation, which I have summarized below:
- Install
eslint-config-airbnb-typescript
- Make sure dev dependencies
@typescript-eslint/eslint-plugin
and@typescript-eslint/parser
are at major version 5 - Add
extends
: ["airbnb-typescript"]
to .eslintrc.json - Add
parserOptions.project: ["tsconfig.json"]
to.eslintrc.json
Here’s an example .eslintrc.json
with this setup:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"airbnb-typescript"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module",
"project": ["tsconfig.json"]
},
"plugins": [
"react",
"@typescript-eslint"
]
}
Special thanks to this SO answer by Ryan Wheale.
This is the setup that I use.
How to Allow tsx File Extensions with eslint-import-resolver-typescript
eslint-import-resolver-typescript
is a plugin that adds TypeScript support to eslint-plugin-import
.
I use the @typescript-eslint
plugin in my project and eslint-import-resolver-typescript
is add .tsx
file extension support to that plugin as well.
Use eslint-import-resolver-typescript
if you cannot update the webpack config file and you aren’t using AirBnB’s ESLint setup.
Install eslint-import-resolver-typescript
Step one is installing the plugin. Here is the npm package link.
Remember to install the plugin as a dev dependency. Here is the suggested npm install script:
npm i -D eslint-import-resolver-typescript
Also install eslint-plugin-import
and @typescript-eslint/parser
if you have not. These are required for adding .tsx
file import support with ESLint and Typescript-ESLint.
Add TypeScript to the Import/Resolver
Step Two is to add the following value at the root of your .eslintrc.json file:
"settings": {
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
}
From the npm page’s configuration section, this config always tries to resolve types under the <root>@types
directory.
I am not sure why this is required for .tsx
files to be imported, but if this is removed then the error returns.
Configure the .eslintrc.json Import/Extensions Rule
Step Three is to add the plugin rule to your .eslintrc.json rules section.
There are two options:
- Turn off the import/extensions rule for all extensions
- Turn off the rule for specific extensions (this is usually the better plan)
Add this single line to your rules section if you want to turn of lint checking for all extensions:
"import/extensions": "off"
Add the below code to turn off specific extension checking:
"rules": {
"import/extensions": [
"error",
"always",
{
"pattern": {
"jsx": "never",
"tsx": "never"
}
}
]
}
The “error” value means the compiler will error instead of simply log a warning.
The “always” value means for all unspecified extensions the compiler should still require extensions.
The “pattern” value is where you can specify which extensions are not required.
Here is an example .eslintrc.json
. It has a basic configuration plus the import/extensions rule set up to allow for .tsx
file extensions.
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
//"import/extensions": "off",
"import/extensions": [
"error",
"always",
{
"pattern": {
"jsx": "never",
"tsx": "never"
}
}
]
},
"settings": {
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
}
}