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

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

Answer 2

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.