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

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

# 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.

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.

Ensure your TypeScript configuration includes the directory containing your files:

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

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

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

// ❌ 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.

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

# 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:

npx tsc --init

Ensure your build tool can process TypeScript files.

For Vite (already supports TypeScript):

// vite.config.js - no changes needed

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

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

For Next.js (supports TypeScript by default):

# Just add TypeScript files, Next.js auto-configures

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.