[@types/react-navigation] the type definition seems to be broken.

[rodrigoelp]

EDIT: Trying to find a solution to my problem, noticed @types/react has been bumped down to 15.6.6, this is given to you when setting up a new project. That is the root cause of this issue. If you know how to report that issue, please link it to this issue and then close it

Hi guys, today I created a new react-native project and got several issues when setting up the project with react-navigation.

I've followed the steps below to set up my project:

> react-native init appWithNav
> cd appWithNav
> yarn add react-navigation @types/react @types/react-native @types/react-navigation
>  tsc --init --pretty --target es2017 --jsx react --sourceMap --module commonjs --outdir ./lib/
> {edit tsconfig.json to add "include": [ "./src/" ] after the "compilerOptions" group }
> tsc

These are the dependencies in my sample project

		"@types/react": "^15.6.6",
		"@types/react-native": "^0.50.2",
		"@types/react-navigation": "^1.0.22",
		"react": "16.0.0",
		"react-native": "0.50.1",
		"react-navigation": "^1.0.0-beta.19"

• I am using typescript Version 2.6.1
• Tried to set up my project with @types/react-navigation and had the following compilation issues:

node_modules/@types/react-navigation/node_modules/@types/react/index.d.ts(3533,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAncho
rElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
node_modules/@types/react-navigation/node_modules/@types/react/index.d.ts(3534,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but
 here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-navigation/node_modules/@types/react/index.d.ts(3535,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>',
but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-navigation/node_modules/@types/react/index.d.ts(3536,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'area' must be of type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaEl
ement>', but here has type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>'.
node_modules/@types/react-navigation/node_modules/@types/react/index.d.ts(3537,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'article' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>',
but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

... the list continues...

Mentioning the authors as listed on the index.d.ts file:
@huhuanming, @mhcgrq, @fangpenlin, @abrahambotros, @petejkim @iRoachie, @charlesfamu, @phanalpha, @timwangdev, @BANG88

[kevintoombs]

I'm having a related issue.

With a fresh run of
create-react-app my-app --scripts-version=react-scripts-ts
I get the error

Failed to compile
app\node_modules\@types\react-dom\index.d.ts
(16,43): error TS2305: Module '"app/node_modules/@types/react/index"' has no exported member 'ReactPortal'.

Hopefully this is related and the out of the box bug helps you track it down.

[rodrigoelp]

Flipping hell... I think I've found the source of the issue...

For some reason, it seems @types/react rolled back to an earlier version ("^15.6.6") instead of ("^16.0.20") (this version was there yesterday)

I don't know how to report that, but manually changing my package.json to use 16.0.20 has fixed my issue and now I can compile.

My new dependencies looks like this:

	"dependencies": {
		"@types/react": "^16.0.20",
		"@types/react-native": "^0.50.2",
		"@types/react-navigation": "^1.0.22",
		"react": "16.0.0",
		"react-native": "0.50.1",
		"react-navigation": "^1.0.0-beta.19"
	},

Alternatively, when installing your @types/react indicate the version you want to get
yarn add @types/react@16.0.20

[mamiu]

Just call this two commands:

npm remove --save @types/react
npm install --save @types/react

That will update the react types to the latest version.

[rodrigoelp]

Hi @mamiu,
The issue was exhibited even on that condition you are mentioning. It seems to be fixed now as the definition has moved to @types/react@16.0.21 and I don't get the errors when creating a new project.

[mamiu]

@rodrigoelp Yes, you're right.
That was my first day experience with react and typescript 😒

But they fixed it fast. So nevermind!

[hpdeveloper28]

Just fire following command:

npm install --save @types/react-navigation

It works for me.

[rodrigoelp]

Hi @hpdeveloper28, the issue has been fixed for quite a while.

Cheers!