CODEWITHSUNDEEP
javascriptreactjstypescriptnpmkepler
user12541823
user12541823

Reputation:

Unable to Install Kepler React - TypeScript

I installed Kepler.g like this:

npm i kepler.gl

it got added to my package.json:

"kepler.gl": "^2.1.2"

However, if I try to import:

import keplerGlReducer from "kepler.gl/reducers";

I get an error that

Could not find a declaration file for module 'kepler.gl/reducers'. '/Users/grannyandsmith/web/web-admin/node_modules/kepler.gl/reducers.js' implicitly has an 'any' type.
  Try `npm install @types/kepler.gl` if it exists or add a new declaration (.d.ts) file containing `declare module 'kepler.gl/reducers';`ts(7016)

I also tried 

npm install @types/kepler.gl

but as expected it gives me npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fkepler.gl - Not found

How can I fix this?

Edit:

tsconfig file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "typeRoots": ["types/global.d.ts"]
  },
  "include": [
    "src"
  ]
}

Upvotes: 4

Views: 1585

Answers (2)

rabra
rabra

Reputation: 139

I used a similar approach as Sushanth suggested. I used a *.d.ts file and added the following to deal with TypeScript issues

declare module "kepler.gl";
declare module "kepler.gl/processors";
declare module "kepler.gl/actions";
declare module "kepler.gl/reducers";

and added "typeRoots": ["src/types", "node_modules/@types"] in my tsconfig.json file to allow TS look for my custom declarations

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

If the types are not available for the particular library that you are pulling in. Here are the 2 options.

  • Add the typings yourself ( this can be a pain as you will have to understand the complete API ). The advantage of this is all the typings will be available.

  • The other option is to create a declarations file *d.ts file where you let TS know, hey I know what I am doing. The disadvantage is that you won't have the typings available and the autocomplete won't work.

@types/index.d.ts ( need to let TS know to find the types here )

declare module 'kepler.gl/reducers';

Upvotes: 0

Related Questions