CODEWITHSUNDEEP
typescript
Robbie Milejczak
Robbie Milejczak

Reputation: 5770

TypeScript and React Native, hundreds of errors from node_modules/@types when compiling

I am currently migrating my RN project to TypeScript. I have finished the majority of my JS code, and now when I run tsc I get several hundred errors that all seem to be

error TS 2717: Subsequent property declarations must have the same type. Property
  prop must be of the type TYPE,
  but here has type TYPE

for example:

error TS2717: Subsequent property declarations must have the same type.  Property
  'view' must be of type 'SVGProps<SVGViewElement>',
  but here has type 'SVGProps<SVGViewElement>'.

which is doubly confusing because the listed types are almost always identical.

I am able to run my app, I am still getting useful messages from tslint, and any errors specific to my code appear at the bottom of the list of compiler errors.

My tsconfig.json is currently:

{
  "compilerOptions": {
    "allowJs": true,
    "target": "es2018",
    "outDir": "dist",
    "module": "commonjs",
    "sourceMap": true,
    "lib": ["esnext", "es7", "dom", "es6"],
    "jsx": "react-native",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["react-native"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

I've tried various solutions, including setting types to [] as per the TypeScript docs and setting exclude to various forms of node_modules such as ./node_modules, node_modules/* etc but none of these changes have had any effect.

Upvotes: 10

Views: 4024

Answers (2)

Ssh Quack
Ssh Quack

Reputation: 911

The root cause of the problem appears to be from the Typescript compiler checking the libraries. Adding skipLibCheck: true to tsconfig.json skips checking the libs.

See How to force tsc to ignore node_modules folder? for detailed explanation.

Upvotes: 5

Robbie Milejczak
Robbie Milejczak

Reputation: 5770

Okay I was able to solve this. I'm not totally sure how dependencies are managed via yarn but my problem was definitely dependencies.

First I removed all my @types/* libraries from my dependencies, and then I deleted my node modules folder.

Then, despite what the majority of tutorials and guides will say, I installed only @types/react-native and not @types/react. @types/react-native added the react typings on its own. I'm thinking that the typings for @types/react maybe depended on the node typings, and by explicitly installing them I introduced a bunch of conflicts both between @types/react-native and @types/node as well as between @types/react-native and @types/react. My project compiles without error now.

Upvotes: 9

Related Questions