React Native with Typescript 2.8 - Cannot redeclare block-scoped variable 'console'

Question

Created a react-native starter project with Typescript which could run 2 weeks ago. Now when I try to run the project it gives error during the typescript compilation.

Using skipLibraryCheck: true in tsconfig.json fixes the error. But why is it throwing errors from ~/.nvm and ./node_modules directories?

Error (Updated for node_modules/.bin/tsc):

>  node_modules/.bin/tsc
node_modules/@types/react-native/index.d.ts(8742,11): error TS2451: Cannot redeclare block-scoped variable 'console'.
node_modules/@types/react-native/index.d.ts(8750,18): error TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.
node_modules/@types/react-native/index.d.ts(8753,11): error TS2451: Cannot redeclare block-scoped variable 'navigator'.
node_modules/redux-thunk/index.d.ts(4,47): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux-thunk/index.d.ts(8,20): error TS2428: All declarations of 'Dispatch' must have identical type parameters.
node_modules/redux/index.d.ts(115,18): error TS2428: All declarations of 'Dispatch' must have identical type parameters.
node_modules/redux/index.d.ts(161,13): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(283,42): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(283,53): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(302,66): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(302,77): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(303,38): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(384,95): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(389,33): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(391,106): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/redux/index.d.ts(396,34): error TS2314: Generic type 'Dispatch<A, S>' requires 2 type argument(s).
node_modules/typescript/lib/lib.es6.d.ts(21612,13): error TS2451: Cannot redeclare block-scoped variable 'navigator'.
node_modules/typescript/lib/lib.es6.d.ts(21788,13): error TS2451: Cannot redeclare block-scoped variable 'console'.

Project details:

❯ react-native info
  Environment:
  OS: macOS High Sierra 10.13.4
  Node: 9.11.1
  Yarn: 1.6.0
  npm: 6.0.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 2.3 AI-162.3934792

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.3 => 0.55.3

package.json

{
  "name": "hello-world-rn",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build": "npm run clean && npm run tsc --",
    "clean": "rimraf lib",
    "lint": "tslint src/**/*.ts",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "native-base": "2.4.3",
    "react-native": "0.55.3",
    "react-redux": "5.0.7",
    "redux": "4.0.0",
    "redux-thunk": "2.2.0"
  },
  "devDependencies": {
    "@types/jest": "22.2.3",
    "@types/react": "16.3.13",
    "@types/react-native": "0.55.8",
    "@types/react-redux": "5.0.19",
    "@types/react-test-renderer": "16.0.1",
    "babel-core": "6.26.3",
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "concurrently": "3.5.1",
    "eslint": "4.19.1",
    "jest": "22.4.3",
    "react": "16.3.1",
    "react-test-renderer": "^16.3.0-alpha.1",
    "rimraf": "2.6.2",
    "tslint": "5.9.1",
    "tslint-config-prettier": "1.12.0",
    "tslint-eslint-rules": "5.1.0",
    "tslint-react": "3.5.1",
    "typescript": "2.8.3"
  },
  "jest": {
    "preset": "react-native",
    "testRegex": "lib/.+\\.(test|spec).js$",
    "coverageDirectory": "coverage",
    "coverageReporters": [
      "text-summary",
      "html"
    ]
  },
  "collectCoverageFrom": [
    "lib/**/*.js",
    "!lib/**/*.spec.js",
    "!lib/**/*.index.js"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react-native",
    "sourceMap": true,
    "outDir": "./lib",
    "strict": true,
    "types": ["react", "react-native", "jest"],
    "esModuleInterop": true,
    "skipLibCheck": false
  },
  "compileOnSave": false,
  "exclude": ["./android/*", "./ios/*", "./lib/*", "./node_modules/*"],
  "filesGlob": ["typings/index.d.ts", "src/**/*.ts", "src/**/*.tsx"],
  "types": ["react", "react-native", "jest"]
}

Answer 1

I can't really tell you what went through now and then which broke the typings, I can mostly give hints...

• When you call tsc from the terminal, it will use the global version of typescript, including its core typings, this is from where you are getting the ".nvm" errors. It is recommended that you use a local version (node_modules/.bin/tsc).
• I suggest you try adding "moduleResolution: node". I don't know why, just try it, maybe it fixes something.
• I'm not sure redux-thunk typings properly work with the new redux@4.x. Might be the source of your errors.

I usually just leave "skibLibCheck" on, we never know when libs were written with older versions of TS in mind, or even without the "strict" flag in mind.

EDIT FROM COMMENTS

• Seems react-native adds his own version of the base javascript typings, so you can disable the ones probided by TS through the lib flag, so they don't conflict.

Answer 2

I ran into the "must be of type 'Geolocation'" one. Still trying to figure out how exactly to fix it, but in @types/react-native, Geolocation is defined as an alias of GeolocationStatic, but Geolocation is also a typescript type, and it needs to be the typescript type, not the @types/react-native type. It looks like the only place within @types/react-native/index.d.ts the Geolocation alias is used is

interface Navigator {
    readonly product: string;
    readonly geolocation: Geolocation;
}

Geolocation is assigned

export var Geolocation: GeolocationStatic;
export type Geolocation = GeolocationStatic;

Commenting these guys out after running npm install makes it work. I put it in an npm postinstall powershell script.

Yes, yes, it's hacky, and I'm positive there's a smooth, good solution to this. But if you just want it working and don't depend on these elsewhere, it could work. Another potential solution would be just to rename them.

Did some more snooping, looks like this is the official recommendation for the moment. Gotta love hacky fixes! https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24573

Answer 3

In case someone else stumbles upon this question when using react-native and react-native-typescript-transformer:

You can get this same issue when using react-native-typescript-transformer and noEmit, since global type declaration of react-native/index.d.ts are in conflict with typescript/lib/lib.es6.d.ts

From the issue on github:

... defining the ES6 base typings with the lib option seems to be enough to fix this issue...

...the noEmit option which is required by the react-native-typescript-transformer that causes this behaviour.

Solution

Specify in tsconfig.json valid library files to be included in the compilation. React Native is built on top of ES6 so that would be enough: "lib": [ "es6" ] in your package.json.

Answer 4

I ran into same issue when using react-native along with typescript with nvm.

But finally resolved this by adding the "lib": ["ES6"] to my tsconfig.json file.