RN - Could not find a declaration file for module vendor/react-native-vector-icons

1
votes

I am using expo 34.0.1 for react native development. I am using TypeScript for the project and running tsc --project . --noEmit in a testing script with jest. That leads to the following error:

node_modules/@expo/vector-icons/build/createIconSet.d.ts:2:55 - error TS7016: Could not find a declaration file for module './vendor/react-native-vector-icons/lib/create-icon-set'. '../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js' implicitly has an 'any' type.

2 export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from './vendor/react-native-vector-icons/lib/create-icon-set'; Found 1 error.

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ tsc-test: tsc --project . --noEmit npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ tsc-test script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
/Users/.npm/_logs/2019-08-31T19_25_49_598Z-debug.log

tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "es6",
    "target": "es6",
    "lib": ["es2016", "esnext.asynciterable"],
    "jsx": "react-native",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "types": ["jest"],
    "moduleResolution": "node",
    "allowJs": false,
    "esModuleInterop": true
  },
  "exclude": ["node_modules"]
}

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "test": "npm run tslint && npm run tsc-test && npm run jest",
    "tslint": "tslint --project .",
    "tsc-test": "tsc --project . --noEmit",
    "jest": "jest"
  },
  "dependencies": {
    "@types/enzyme": "^3.10.3",
    "expo": "^34.0.1",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-dom": "^16.9.0",
    "react-moment": "^0.9.2",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-elements": "^1.1.0",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.12.1"
  },
  "devDependencies": {
    "@types/expo": "^32.0.13",
    "@types/jest": "^24.0.18",
    "@types/react": "^16.9.2",
    "@types/react-test-renderer": "^16.9.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "jest": "^24.9.0",
    "jest-expo": "^34.0.1",
    "react-test-renderer": "^16.9.0",
    "ts-jest": "^24.0.2",
    "tslint": "^5.19.0",
    "tslint-config-airbnb": "^5.11.1",
    "typescript": "^3.5.3"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
      "^.+\\.tsx?$": "ts-jest"
    },
    "testMatch": [
      "**/__tests__/**/*.ts?(x)",
      "**/?(*.)+(spec|test).ts?(x)"
    ],
    "moduleFileExtensions": [
      "js",
      "ts",
      "tsx"
    ],
    "globals": {
      "ts-jest": {
        "tsConfig": {
          "jsx": "react"
        }
      }
    },
    "setupFilesAfterEnv": [
      "./src/setupTests.js"
    ]
  }
}

Any ideas how to solve that?

2
react-nativeexpo

2 Answers

5
votes

I can see that you are using eslint. So, it is safe to edit your compiler options and add

"noImplicitAny": false,

this will silence your error. And eslint will catch any implicit any in your code.

I hope this is correct from my understanding :-)

1
votes

Step 1:

Inside the "scripts" object in your package.json simply add:

"postinstall": "npx typesync"

The benefit of using npx here is that it doesn't require you to install anything on your machine.

Step 2:

Run yarn or npm install to effectively run the 'postinstall' script. Once all your missing packages are added, you'll get a list of all the new typings to be added to your project

It may look something like this:

📦 yourAppNameHere — package.json (4 new typings added, 0 unused typings removed)
├─ + @types/babel__core
├─ + @types/react-native-vector-icons
├─ + @types/react

Step 3:

You will likely be asked to run npm install or yarn again, which will install the packages added and you will be good to go!