CODEWITHSUNDEEP
reactjstypescript
Perplexityy
Perplexityy

Reputation: 569

Namespace 'React' has no exported member 'FC'

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?

Upvotes: 4

Views: 7287

Answers (4)

Andrey Tinyakov
Andrey Tinyakov

Reputation: 149

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

Upvotes: 1

rajan tank
rajan tank

Reputation: 247

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

Upvotes: 1

Sydney Y
Sydney Y

Reputation: 3152

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.

Upvotes: 0

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

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:

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Upvotes: 2

Related Questions