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.

Just use VS Code. When you run `tsc` at the command-line, what does it say? That eliminates VS. — Josh Wulf, Feb 22 '20 at 21:41
https://github.com/tomdale/ember-network/issues/10 - is this your issue too? not running npm install in the correct folder. — JGFMK, Feb 22 '20 at 21:59
@JGFMK Honestly I don´t know much about TypeScript, but I´m pretty sure I don´t have any fastboot in my stack. — MakePeaceGreatAgain, Feb 22 '20 at 22:38
I did some stuff with npm.. using Ionic development a few years back - and some Angular. You normally setup a project - then run commands in your project structure afterwards. So you do the first install for the framework - the second install in your project where you've got you package.json. Are you sure you haven't mixed up doing something like installing the framework in the project folder - or vice-versa. That was what I was eluding too. The comment in the link was enough to spark that line of thought. Global installs vs local project.You can update project package.json during install too. — JGFMK, Feb 22 '20 at 23:51
@JGFMK Install the framework into the project? Which framework you refer to? I appended my package.json, though. — MakePeaceGreatAgain, Feb 23 '20 at 16:15
If you were doing stuff with Angular or Ionic you install those frameworks globally (as you may have many such projects), but there may be dependencies in your package.json specific to you project. Check out things like the -g option on the npm install. For those frameworks you would npm install with the -g outside the project. Then npm install inside your project for specific extras particular to your project. See here https://docs.npmjs.com/cli/install. IIRC the -d/-p flag options updates package.json as you install a dependency into project within the project folder for the first time. — JGFMK, Feb 24 '20 at 10:28
@JGFMK Okay I see, so I have some "global" dependencies and "local" ones. Where is that "global" directory located on Windows? Although I can´t remember ever to have installed anything different from `npm theLib --save`, which is - by the provided link - allways installed locally. — MakePeaceGreatAgain, Feb 24 '20 at 10:34
It would depend if you are on a Windows or Mac/Unix flavour OS — JGFMK, Feb 24 '20 at 10:35
And there are other things that code into play - like whether you run multiple versions of node/npm at once with something like nvm — JGFMK, Feb 24 '20 at 10:37
Sorry - I did it on a Mac. Not sure on Windows. Perhaps others can comment. — JGFMK, Feb 24 '20 at 10:39

score 15 · Accepted Answer · edited Oct 31 '20 at 15:42

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.

"If it is a browser prohect, you should probably not be using node-fetch" That seems to be my actual problem. How to `fetch` in browser? — MakePeaceGreatAgain, Mar 03 '20 at 15:22
see here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch just add `DOM` to your `TypeScriptLib`s, you will find the `fetch` method on both the global scope (i.e. just use `fetch`) or on the `window` object (i.e. `window.fetch`) — DoronG, Mar 03 '20 at 19:26
aaaah, I didn´t know it makes a difference if I use JS on server- or client-side. For me it´s allways been just client-side. Thanks for the explanation. — MakePeaceGreatAgain, Mar 04 '20 at 07:42
@HimBromBeere Using npm install installs the module into the current directory only (in a subdirectory called node_modules). Is app.js located under home/dave/src/server/? If not and you want to use the module from any directory, you need to install it globally using npm install -g. — kgajjar20, Mar 06 '20 at 13:58

cannot import module in TypeScript

1 Answers1

TL;DR

Some other observations