How to fix import type can only be used in a TypeScript file in React

ReactINTERMEDIATEMEDIUMUpdated Dec 8, 2025· 118 views

This error occurs when using TypeScript's type-only import syntax in a JavaScript file or when file extensions don't match the content. The import type syntax, introduced in TypeScript 3.8, is only valid in .ts or .tsx files.

Quick fix

Fixes import type can only be used in a TypeScript file

# Rename JavaScript file to TypeScript
mv MyComponent.jsx MyComponent.tsx

# For non-React files
mv utils.js utils.ts
  1. Check and rename file extension to .ts or .tsx
  2. Reload VS Code window
  3. Verify tsconfig.json includes your files
  4. Separate type imports from value imports
react — error
# Rename JavaScript file to TypeScript
mv MyComponent.jsx MyComponent.tsx
# For non-React files
mv utils.js utils.ts
import type can only be used in a TypeScript file

What this error means

This error indicates that you're attempting to use TypeScript's type-only import syntax (import type) in a file that TypeScript doesn't recognize as a TypeScript file. The import type statement was introduced in TypeScript 3.8 to allow importing type information that gets completely erased at runtime, improving bundle size and build performance. The error typically appears in two scenarios: either you're using TypeScript syntax in a .js or .jsx file, or your file has the correct .ts/.tsx extension but VS Code or your build tool hasn't recognized it as TypeScript yet. In React projects, this is particularly common when migrating from JavaScript to TypeScript or when configuration issues prevent proper file recognition. Import type statements are compile-time only constructs that tell TypeScript "this import is only for type checking and should be removed from the final JavaScript output." This distinction is important for optimizing bundle sizes and clarifying developer intent.

Typical symptoms

  • Error message "import type can only be used in a TypeScript file" appears in VS Code or during build
  • Red squiggly lines under import type statements in the editor
  • Build fails with TypeScript compilation errors even though syntax appears correct
  • Error persists even after adding TypeScript to the project
  • IntelliSense shows TypeScript errors in React component files
  • Webpack or Vite build process fails at the TypeScript compilation step
  • ESLint or Biome shows syntax errors for import type statements

Common causes

  1. Using import type syntax in a .js or .jsx file instead of .ts or .tsx
  2. File extension doesn't match the content (TypeScript code in JavaScript file)
  3. VS Code hasn't reloaded after renaming file extensions from .js to .ts
  4. tsconfig.json not properly configured to include the file path
  5. Build tool (Webpack, Vite, etc.) not configured to process TypeScript files
  6. Missing or incorrectly configured TypeScript loader in build configuration
  7. Using import type with runtime values instead of only types or interfaces
  8. Editor language mode set to JavaScript instead of TypeScript for a .ts/.tsx file

How to fix "import type can only be used in a TypeScript file"

1Check and rename file extension to .ts or .tsx

Verify your file extension matches the content. For React components with JSX, use .tsx:

bash
# Rename JavaScript file to TypeScript
mv MyComponent.jsx MyComponent.tsx

# For non-React files
mv utils.js utils.ts

In VS Code, you can right-click the file in the explorer and select "Rename" to change the extension.

2Reload VS Code window

After renaming files, VS Code may not immediately recognize the change. Reload the window:

1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
2. Type "Reload Window"
3. Select "Developer: Reload Window"

Alternatively, close and reopen VS Code to ensure all language services restart.

3Verify tsconfig.json includes your files

Ensure your TypeScript configuration includes the directory containing your files:

json
{
  "include": [
    "src/**/*",
    "components/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

If your files are outside the included paths, TypeScript won't process them.

4Separate type imports from value imports

If you're importing both types and runtime values, separate them or use inline type syntax:

typescript
// ❌ Incorrect - mixing types and values
import type { FC, useState } from 'react';

// ✅ Correct - separate imports
import type { FC } from 'react';
import { useState } from 'react';

// ✅ Also correct - inline type syntax
import { type FC, useState } from 'react';

The inline syntax (available in TypeScript 4.5+) is often cleaner for mixed imports.

5Install and configure TypeScript if missing

If TypeScript isn't installed in your project, add it:

bash
# npm
npm install --save-dev typescript @types/react @types/react-dom

# yarn
yarn add -D typescript @types/react @types/react-dom

# pnpm
pnpm add -D typescript @types/react @types/react-dom

Then initialize a tsconfig.json if you don't have one:

bash
npx tsc --init
6Configure build tool for TypeScript

Ensure your build tool can process TypeScript files.

For Vite (already supports TypeScript):

javascript
// vite.config.js - no changes needed

For Webpack, ensure ts-loader or babel-loader with TypeScript preset:

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

For Next.js (supports TypeScript by default):

bash
# Just add TypeScript files, Next.js auto-configures
7Check editor language mode

In VS Code, verify the language mode in the bottom-right corner shows "TypeScript React" or "TypeScript":

1. Click the language indicator in the status bar
2. Select "TypeScript React" for .tsx files
3. Select "TypeScript" for .ts files

If it shows "JavaScript" or "JavaScript React", the editor isn't treating it as TypeScript.

Advanced notes

The import type syntax was introduced in TypeScript 3.8 as part of type-only imports and exports. It helps improve bundle sizes by ensuring type imports are completely erased during compilation, leaving no runtime remnant.

Starting with TypeScript 4.5, you can use inline type imports (import { type Foo, bar } from 'module') which is often cleaner than separate import type statements when you need both types and values from the same module.

If you're using the verbatimModuleSyntax option in tsconfig.json (available in TypeScript 5.0+), TypeScript enforces a strict distinction between type and value imports. This can help catch accidental mixing of types and runtime code but requires more explicit import statements.

In monorepo setups or projects with multiple tsconfig.json files, ensure all configurations properly include your source files. Path mapping in tsconfig.json (compilerOptions.paths) can also affect how TypeScript resolves imports.

For Create React App projects, note that CRA has built-in TypeScript support but requires files to have .tsx extensions. Ejecting or using CRACO may be necessary for advanced TypeScript configurations.

Some linters and formatters (like Biome or typescript-eslint) have rules that enforce or discourage import type usage. Check your linting configuration if you see conflicting guidance about when to use import type.

Frequently asked questions

What does "import type can only be used in a TypeScript file" mean?
This error indicates that you're attempting to use TypeScript's type-only import syntax (import type) in a file that TypeScript doesn't recognize as a TypeScript file. 8 to allow importing type information that gets completely erased at runtime, improving bundle size and build performance. tsx extension but VS Code or your build tool hasn't recognized it as TypeScript yet.
How do I fix "import type can only be used in a TypeScript file"?
This error occurs when using TypeScript's type-only import syntax in a JavaScript file or when file extensions don't match the content. The import type syntax, introduced in TypeScript 3.8, is only valid in .ts or .tsx files.
What causes "import type can only be used in a TypeScript file"?
Using import type syntax in a .js or .jsx file instead of .ts or .tsx File extension doesn't match the content (TypeScript code in JavaScript file) VS Code hasn't reloaded after renaming file extensions from .js to .ts
Is the "import type can only be used in a TypeScript file" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading