Namespace 'React' has no exported member 'FC'. in '@types/reactour'

Question

I am working in a react application. I had my package.json file as follows.

`{
  ...
  ...
  "dependencies": {
    "@storybook/addon-backgrounds": "^3.4.8",
    "@storybook/react": "^4.0.0-alpha.4",
    "@types/d3": "^5.0.0",
    "@types/debug": "^0.0.30",
    "@types/enzyme": "^3.1.9",
    "@types/jest": "^23.1.4",
    "@types/moment-timezone": "^0.5.4",
    "@types/react": "^16.0.38",
    "@types/react-color": "^3.0.1",
    "@types/react-copy-to-clipboard": "^4.2.6",
    "@types/react-dom": "^16.0.4",
    "@types/react-intl": "^2.3.16",
    "@types/react-mentions": "2.4.0",
    "@types/react-redux": "^6.0.3",
    "@types/react-router": "^4.0.22",
    "@types/react-router-dom": "^4.2.4",
    "@types/react-select": "^1.2.6",
    "@types/react-show-more": "^2.0.1",
    "@types/redux": "^3.6.0",
    "@types/redux-form": "^7.3.1",
    "@types/redux-logger": "^3.0.6",
    "@types/storybook__addon-backgrounds": "^3.2.0",
    "@types/storybook__react": "^3.0.8",
    "awesome-typescript-loader": "^5.2.0",
    "axios": "^0.18.0",
    "babel-register": "^6.26.0",
    "connected-react-router": "^4.4.1",
    "cosed": "^1.1.8",
    "d3": "^5.7.0",
    "date-fns": "^1.29.0",
    "debug": "^3.1.0",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "emoji-mart": "^2.6.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "gen-tester": "^3.1.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.1.0",
    "husky": "^0.14.3",
    "immer": "^1.3.1",
    "jest": "^23.3.0",
    "jest-environment-enzyme": "^6.0.2",
    "jest-enzyme": "^6.0.2",
    "jest-styled-components": "^5.0.1",
    "lint-staged": "^7.2.0",
    "moment-timezone": "^0.5.14",
    "prettier": "^1.13.7",
    "react": "^16.8.0",
    "react-color": "^2.17.3",
    "react-copy-to-clipboard": "^5.0.1",
    "react-cosed": "^1.0.9",
    "react-dom": "^16.2.0",
    "react-intl": "^2.8.0",
    "react-mentions": "^2.4.1",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-select": "^1.2.1",
    "react-show-more": "^2.0.0",
    "reactour": "^1.8.5",
    "redux": "^4.0.0",
    "redux-cosed": "^1.0.1",
    "redux-form": "^7.4.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0",
    "styled-components": "^3.1.6",
    "ts-jest": "^23.0.0",
    "tslint": "^5.9.1",
    "tslint-config-prettier": "^1.13.0",
    "tslint-no-circular-imports": "^0.5.0",
    "typescript": "^2.7.2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^1.0.1",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.5",
    "webpack-merge": "^4.1.3"
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write",
      "git add"
    ]
  },
  "devDependencies": {
    "@types/lodash.debounce": "^4.0.4",
    "@types/reactour": "^1.13.1",
    "firebase-tools": "^6.1.0",
    "lodash.debounce": "^4.0.8"
  }
}

`

I tried to add intro tour for my application with reactour. And when I added the package 'reactour' in my application it asks for @types/reactour and I added that too. But still facing some package depending issues.

I added these..

`"dependencies": {
    ...
    ...
    "@types/reactour": "^1.13.0",
    "reactour": "^1.8.5",
    ...
    ...
}`

The errors are in console...

> ✖ ｢atl｣: Checking finished with 13 errors [at-loader]
> ./node_modules/@types/react-mentions/index.d.ts:38:24 
>     TS2314: Generic type 'UIEvent<T>' requires 1 type argument(s). 
> 
> [at-loader] ./node_modules/@types/react-mentions/index.d.ts:45:22 
>     TS2694: Namespace 'React' has no exported member 'RefObject'. 
> 
> [at-loader] ./node_modules/@types/react-mentions/index.d.ts:45:61 
>     TS2694: Namespace 'React' has no exported member 'RefObject'. 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:276:43 
>     TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s). 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:278:43 
>     TS2694: Namespace 'React' has no exported member 'ComponentPropsWithRef'. 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:281:27 
>     TS2694: Namespace 'React' has no exported member 'FC'. 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:287:43 
>     TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s). 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:289:46 
>     TS2694: Namespace 'React' has no exported member 'ComponentPropsWithRef'. 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:290:30 
>     TS2694: Namespace 'React' has no exported member 'FC'. 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:292:41 
>     TS2694: Namespace 'React' has no exported member 'ComponentPropsWithRef'. 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:299:25 
>     TS2694: Namespace 'React' has no exported member 'FC'. 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:301:37 
>     TS2694: Namespace 'React' has no exported member 'ComponentPropsWithRef'. 
> 
> [at-loader] ./node_modules/@types/reactour/index.d.ts:302:32 
>     TS2694: Namespace 'React' has no exported member 'FC'.

Please suggest some solution ... Thanks

Answer 1

If you're coming from an IDE such as Visual Studio and it's throwing this error (compared to the OP which was from the command line), restarting the IDE often solves this error.

Answer 2

This error can also happen if you forget to name your file's extension as .tsx and leave it as .ts

Answer 3

Update the @types/react to the latest version or a specific version to match your react and react-dom packages.

npm i @types/react@latest --save-dev

or

yarn add @types/react --dev

You do not need to replace your node_modules or your lock file.

Answer 4

It worked for me. Deleted the yarn.lock file and removed node_modules after updating the @types/react.

And did yarn install.

Answer 5

Update your @types/react to the latest version (which is 16.9.9 atm).

You might need to run npm i @types/react --save-dev, but manually replacing the version should work too.