158

I am migrating my existing React code over to TypeScript and I am hitting a lot of issues, one of them being a lot of "Cannot find name" errors when I make my .js files .ts files.

Here is the code in question:

import React from 'react';

const Footer = ({ children, inModal }) => (
    <footer className={'tableBottomPanel' + (inModal ? " in-modal" : "") }>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

The five lines from <footer> to </footer> are underlined in red and give me various errors, depending where I hover my mouse, such as:

  • Cannot find name 'footer'.
  • '>' expected
  • Cannot find name 'div'
  • Unterminated regular expression literal
  • Operator '<' cannot be applied to types 'boolean' and 'RegExp'

Here is my tsconfig.json file:

{
    "compilerOptions": {
        "outDir": "./dist/", // path to output directory
        "sourceMap": true, // allow sourcemap support
        "strictNullChecks": true, // enable strict null checks as a best practice
        "module": "es6", // specify module code generation
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allow a partial TypeScript and JavaScript codebase
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es6",
            "dom"
        ],
        "types": [
            "node"
        ]
    },
    "include": [
        "./src/"
    ]
}

I am incredibly confused and would greatly appreciate some help!

Improve this question
5
  • 4
    Have you added the typings for React/React DOM? Also, maybe it should be named .tsx. Commented Jul 3, 2018 at 15:22
  • 26
    Is this code in a . tsx OR . ts file? To use jsxthe extension must be tsx Commented Jul 3, 2018 at 15:22
  • 1
    Although it seems like the error gets solved for everyone by renaming ts -> tsx but not mine, because my file is already .tsx and it had happened multiple times but gets solved by itself. Commented Sep 28, 2022 at 23:55
  • @CircuitPlanet I am facing this issue,getting error in tsx files. Know how to fix it ? Commented May 14, 2023 at 13:58
  • @TitianCernicova-Dragomir your hint helped me, i was confused by this error then I discovered that I was editing in a .ts file not .tsx Commented Apr 28, 2024 at 15:49

11 Answers 11

Reset to default
389

Typescript isn't expecting to see JSX in your Typescript file. The easiest way to resolve this is to rename your file from .ts to .tsx.

JSX in Typescript Documentation

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Thanks for the answer. This worked for me. All my previous JSX files were using .js extension so I just figured changing it to .ts would be okay. Even though this works for me, I'm curious as to if you know of another way to resolve this especially because changing everything to .tsx would require renaming all of my module imports.
This can also occur when a file is mistakenly named .ts instead of .tsx
@Lunster That's exactly what the question is about.
@coreyward No, not exactly, but analogous yes. The original question was about jsx and tsx, whereas I found this page on Google with the same error, but the cause was ts instead of tsx files. Your answer would not be a solution to my problem unless reformulated to be more general.
@Lunster Original question: “I'm hitting a lot of issues…when I make my .js files .ts files.”.
|
14

If you have ".tsx" file and still getting error then, you should add/modify value for "jsx" from "preserve" --> "react-jsx" as below in tsconfig.json.

Now, you must stop and restart the server again.

{
  "compilerOptions": {
    "jsx": "react-jsx", // 👈change here
    ...
    ...

}
Improve this answer

2 Comments

I did the same, but still it's not working for me.
Hah. VS Code said otherwise: We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default. The following mandatory changes were made to your tsconfig.json: - jsx was set to preserve (next.js implements its own optimized jsx transform)
9

This issue can also arise if, having created .tsx files, you don't include them in the tsconfig file:

"include": [
  "wwwroot/js/**/*.ts",
  "wwwroot/js/**/*.tsx" // <-- this needed to be added in my case
],
Improve this answer

Comments

3

I already had .tsx files in src in a create-react-app project and I could see the project was running fine.

Simply turning VSCode off and on again solved this for me.

Improve this answer

Comments

2

Another subtle way this can happen is if you tsconfig.json doesn't "include" the file that's giving the editor warning.

You still have to get the other configs correct, and they vary depending on bundler and TypeScript version. See https://preactjs.com/guide/v10/typescript#typescript-configuration for advice, most of which is covered in posts above this.

But before you mess with those settings make sure the tsconfig.json at project root is telling VSCode that your file is to be treated as TypeScript. This example assumes your source files are under ./src

// tsconfig.json excerpt
{

  // COMMON PROBLEM 1: this include ignores .tsx files
  // "include": ["./src/**/*.ts"],

  // COMMON PROBLEM 2: this include ignores subdirectories
  // "include": ["./src/*.ts?"],

  // THIS IS PROBABLY CLOSE TO WHAT YOU WANT
  "include": ["./src/**/*.ts?"],
....
}
Improve this answer

Comments

2

In my case I had a .tsx file but my error didn't gone. when I removed
import React from "react"; from top of my next.js, the error was gone.

Improve this answer

Comments

1

I had this error in a file with no extension. It was simply filename without extensions so VSCode assumed it to be TS. When I renamed my file to filename.js the error went away.

Though, If you want the file to be in typescript and don't want the error, the accepted answer (filename.tsx) is the correct approach.

Improve this answer

Comments

1

Just in case others come across this. I use StencilJS, which uses react-like tsx files, without react. My issue was that I loaded the SRC directory in vscode. The correction is loading the parent of the SRC directory, which has the appropriate config.ts, tsconfig.json, etc. This allowed it to recognize tsx files correctly.

Improve this answer

Comments

1

If after changing the file name to tsx you are still facing the issue there might be a chance that your file association for typescript files in vscode is to Typescript, you have to change it to Typescript Jsx if you are using .tsx files.

Improve this answer

Comments

0

if this happens to you and are using vite as your bundler. Make sure both tsconfig.json and tsconfig.node.json file have "jsx": "react-jsx", in the compilerOptions.

Improve this answer

Comments

0

Actually for me the issue was that I was using a different typescript version than the other team member and some of the features in the code were not supported by mine (obsolete) version. Increasing typescript version fixed the issue.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.