Namespace 'React' has no exported member 'FC' - reactjs

Question

I created a new react application by running
npx create-react-app myApp --typescript
I also updated #types/react and #types/react-dom to the latest versions, however, this error still persists when I try to declare a component's type like so
export const Header: React.FC = () => {
return <div />;
};
How can I resolve this?

Answer 1

I just created a new sanbox with typescript. https://codesandbox.io/s/zealous-nobel-phcd7 . Try to compare its settings with your project. You can even download it as a zip file and start a new project from it.
import * as React from "react";
import "./styles.css";
const App: React.FC = () => {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
};
Update
I downloaded the zip file. It works for me. All I can think of is the globally installed npm versions.
You can check them with:
npm list -g --depth 0
I do not know my version hels you, but it works for me wit theese:
├── create-react-app#3.3.1
├── firebase-tools#7.6.1
├── ionic#5.4.6
├── nlf#1.4.3
├── npm#6.13.7
├── nsp#2.8.0
├── ts-node#8.0.3
└── typescript#3.3.3333

Answer 2

I just created a new project using this command
npx create-react-app myapp --typescript
(first of you can't use any capital letter in a project name)
And tried to create component type like this and its work for me fine No error display
export const Header: React.FC = () => {
return <div />;
};
Maybe your package.json file having some versioning issue
My package.json file look's like this
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.1",
"typescript": "~3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
and my App.jsx file looks like
import React from "react"
import logo from './logo.svg';
import './App.css';
const App: React.FC = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
React.FC work for me perfectly

Answer 3

React.FC was removed from create-react-app CRA, see: https://github.com/facebook/create-react-app/pull/8177

Answer 4

The docs for create-react-app point out that if you have ever installed their package globally you'll have to uninstall that. npm uninstall -g create-react-app
create-react-app.dev/docs/adding-typescript
This may be preventing your app from reading the correct configuration on create-react-app. The global version you have may be js and the local ts, then if the global create-react-app script is run it doesn't transpile the ts.