2

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"
  ]
}

2 Answers2

0

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';
Sushanth --
  • 55,259
  • 9
  • 66
  • 105
  • It does't make much of a difference if I write this in another directory and change paths instead of writing it in the index file, right? –  Apr 21 '20 at 18:57
  • sure. You can have this in any directory. You just need to let TS know using `"typeRoots": []` option – Sushanth -- Apr 21 '20 at 18:58
  • Could you elaborate what you mean? Don't have experience with TS much. Nevertheless, adding ```declare module 'kepler.gl/reducers';```along allowed me to compile successfully for now. –  Apr 21 '20 at 19:03
  • You would be losing autocomplete in the editor. It would also not show any static time errors if you call a wrong method for example – Sushanth -- Apr 21 '20 at 19:05
  • So I need to add ```"typeRoots: ["kepler.gl/reducers]"``` in the .d.ts file? –  Apr 21 '20 at 19:21
  • Nope. In the `tsconfig.json` file. If you declare the module under `types/global.d.ts` file then this is what you would add in the config `"typeRoots": ["types/global.d.ts"]` – Sushanth -- Apr 21 '20 at 22:40
  • Could you see my updated qs with the tsconfig file?I added ```declare module 'kepler.gl/reducers';``` inside ```types/global.d.ts``` where types is a new folder in root. I modified the tsconfig accordingly. However, when I compile my app, I get errors like ```Could not find a declaration file for module 'material-ui/styles/typography'. '/Users/grannyandsmith/web/web-admin/node_modules/material-ui/styles/typography.js' implicitly has an 'any' type. Try npm install @types/material-ui if it exists or add a new declaration (.d.ts) file containing `declare module 'material-ui/styles/typography';``` –  Apr 24 '20 at 17:11
  • Did you try installing the types for material ui ? Some libraries provide types out of the box and you will not have to install the types explicitly. But for others they are provides by definitely typed available in the @types/ npm repositiory – Sushanth -- Apr 24 '20 at 17:31
  • material ui was already working properly. The issue only arises after I define a new folder and file for types/global.d.ts for kepler. –  Apr 24 '20 at 17:34
  • ah ok. Can you try changing your config to use `./types/global.d.ts` instead. – Sushanth -- Apr 24 '20 at 17:36
  • Nope that doesn't work either...Index.ts is in the src folder. I created a new folder within src called ```types```. Made a new file in it ```global.d.ts```and wrote ```declare module 'kepler.gl/reducers';```in that file. Is there something wrong with the path? Or the functionality? –  Apr 24 '20 at 19:40
0

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

rabra
  • 89
  • 1
  • 4