Definitelytyped: [@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/[email protected]

[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/[email protected] 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!