cannot import module in TypeScript

Question

I know there are dozens of topics on how to import a depedency into TypeScript via NPM. I tried to do the following

npm install --save node-fetch

and then import * as fetch from 'node-fetch within my app.ts.

in order to use fetch in my code.

However I´m unable to use that lib in my code and I get the following error:

Error TS2307 (TS) Cannot find module 'node-fetch'.

I looked into the loaded modules under node_modules and found node-fetch there, thus I assume the lib was successfully installed. Many of the formentioned threads also mentioned some tsconfig-file, which I was not able to find in my project. It seems VS has its own idea of how to implement settings for TypeScript, which are located in my csproj-file:

<TypeScriptLib>es2015</TypeScriptLib>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptModuleKind>ES2015</TypeScriptModuleKind>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<FilesToIncludeForPublish>AllFilesInTheProject</FilesToIncludeForPublish>

I also got this for other libs as well, e.g. leaflet-geosearch.

This is my package.json:

{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "@types/d3": "^5.7.2",
    "@types/jquery": "^3.3.32",
    "@types/leaflet": "^1.5.8",
    "@types/leaflet-geosearch": "^2.7.1",
    "d3": "^5.15.0",
    "jquery": "^3.4.1",
    "leaflet": "^1.6.0",
    "leaflet-geosearch": "^2.7.0",
    "node-fetch": "^2.6.0"
  }
}

I already deleted the global npm-modules as shown at https://stackoverflow.com/a/15597395/2528063 and installed node-fetch into the local project again to no avail.

Answer 1

TL;DR

You are missing types for node-fetch you should install them like so:

npm i --save-dev @types/node-fetch

Explanation

Some packages come with their own typings some publish typing as a separate package, others have typings created by a 3rd party (the node-fetch package is created by David Frank, whereas the @types/node-fetch is maintained by DefinitelyTyped and the node-fetch types have been created by many people), some packages have no public typings at all (usually more isoteric packages) and you can create your own typings declarations.

Some other observations

Feel free to skip...

It appears you're mixed up with dependencies vs. devDependencies. dependencies should include all packages that should exist in runtime (e.g. node-fetch in your case), whereas devDependencies are additional dependencies needed for build time (e.g. any @types package or any package used only for building the project like webpack/grunt if applicable).

So all of these, should probably move to dependencies:

"d3": "^5.15.0",
"jquery": "^3.4.1",
"leaflet": "^1.6.0",
"leaflet-geosearch": "^2.7.0",
"node-fetch": "^2.6.0"

Lastly, if this is a nodejs (i.e. not a browser based project) project, you should probably use CommonJS or ES6 module kind and not ES2015. see here. If it is a browser project, you should probably not be using node-fetch; instead add DOM to your typescript lib list and use fetch from window.fetch or just fetch as it would be part of the global scope.