[SOLVED] Typescript – "Cannot find name" errors in React components

Issue

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!

Solution

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

Answered By – coreyward

Answer Checked By – Katrina (BugsFixing Volunteer)

Leave a Reply

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