Typescript 2.0 with React Native

Question

I'm just getting started with Typescript and I'm attempting to use it with a new React Native project. However, I can get TS to compile. I've based my setup off of this article with the exception of using npm @types. I get the correct type hinting in my IDE (Atom), but when I attempt to compile, I get the following error:

node_modules/@types/react-native/index.d.ts(19,24): error TS2307: Cannot find module 'react'.
node_modules/@types/react-native/index.d.ts(222,28): error TS2304: Cannot find name 'Component'.
node_modules/@types/react-native/index.d.ts(1017,15): error TS2304: Cannot find name 'Ref'.
...

My package.json

{
  "name": "healthymeIngage",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "15.3.2",
    "react-native": "0.35.0"
  },
  "jest": {
    "preset": "jest-react-native"
  },
  "devDependencies": {
    "@types/react": "^0.14.41",
    "@types/react-native": "^0.29.36",
    "babel-jest": "16.0.0",
    "babel-preset-react-native": "1.9.0",
    "jest": "16.0.2",
    "jest-react-native": "16.0.0",
    "react-test-renderer": "15.3.2",
    "typescript": "^2.0.3"
  }
}

My tsconfig.json

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es2015",
    "jsx": "react",
    "outDir": "build",
    "rootDir": "src",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "node_modules/@types/**/*.ts"
  ]
}

I have the same issue. Did you end up finding a solution? vscode sees all as well, but when I build it fails dramatically — cramhead
– cramhead, Commented Nov 6, 2016 at 22:12

br1anchen · Accepted Answer · 2016-11-27 20:32:50Z

2

Since you are using "typescript": "^2.0.3", the error is caused by this reported issue. There is work around for this, which is using "moduleResolution": "node". Be aware that it will not make classic module resolution works for packages afterwards.

@Leone: your fix "module": "commonjs" will not work since React Native ships with ES2015, require() modules will cause run time errors in React Native.

answered Nov 27, 2016 at 20:32

br1anchen

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leone · Accepted Answer · 2016-11-24 08:16:56Z

0

I changed the module system (the line "module": "es2015") in tsconfig.json file to:

"module": "commonjs",

That way the errors were gone for me.

answered Nov 24, 2016 at 8:16

Leone

3,4333 gold badges25 silver badges33 bronze badges

Collectives™ on Stack Overflow

Typescript 2.0 with React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related