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:
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!
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.
I have also come across the same problem. This may be due to the extension you use as .ts don't allow to write JSX code in it. Instead using .ts extension you should use .tsx extension
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.