Can not find module TypeScript - javascript

I am converting my nodejs project into typescript nodejs. I have changed the extensions of .js files to .ts, however now I am getting require() errors. To overcome this problem, I tried
import express from "express"
However this gives me "Can not find module error". I have researched it and narrowed it down to the issue where I guess TypeScript needs express.d.ts file for detecting the Express module. However I couldn't find the express.d.ts file anywhere in my project. Which ultimately means I am missing something.
Can somebody point me in the right direction or perhaps help me resolve this problem?

Typescript can't find module declarations, that's why you get a (semantic) error.
The code actually compiles and should work without errors.
However, autocompletion and type inference won't work.
To fix the error, you should install express.d.ts as an ambient module declaration file.
This can be done using Typings:
npm install -g typings
typings install express --global --save

Related

How to get NodeJS and node-modules type hints in VS Code?

I have installed VS Code and want to create a simple Express app.
My code right now just looks like this:
import express from "express"
const HTTP_PORT = 1*process.env.PORT || 66600;
const app = express()
app.listen()
When I hover process.env I just get any, instead of {[name:string]:string} or some such. Even process itself is an any type. When I hover app, I just get Function, no hints for stuff like listen, get etc.
I installed these extensions:
JavaScript and TypeScript Nightly
Node.js Modules Intellisense
How do I configure my dev environment to get full type hints for packages and nodejs core libraries?
You can try to install a package containing the type definitions relative to node.js such as #types/node package.
To install it, just type
npm install --save #types/node
or
yarn add #types/node
...following your package system
Note that you could also install other #type packages following what package definitions are missing.
I think you migght need to add express types explicity, do npm i #types/express or yarn add #types/express. With regards to process.env, you cant get type inference because typescript doesnt know anything about your a files that are not in its scan area, its only looking for node modules, ts,and js files when your env variables are in your zshrc file or bashrc file or whatever it is on windows, maybe there is a vs-code plugin for it but im not aware of that

webpack and yarn struggling to load modules

I've run into this issue for a while now, and there seems to be a pattern so I'm assuming that the problem lies in the way I have webpack setup.
I'm using Ruby on Rails 6 which uses webpack (or webpacker, the rails wrapper) to install npm packages. However, webpacker uses yarn. Two packages that I've added yield very similar errors that make my entire site not work anymore.
Error 1:
when I yarn add: bootstrap-fileinput and run the import statement in my scss file and the import statement in my js file, I get this error:
Error: Cannot find module '../img/loading.gif'
Error 2:
When I yarn add gritter and run the import statement in my scss file and the import statement in my js file, I get this error:
Error: Cannot find module '../images/ie-spacer.gif'
Perhaps yarn isn't installing these gifs? or maybe webpack can't find them? This isn't happening with all the npm packages I add, but some of them do throw this error and if I find anymore I'll add them here.
This might have to do with how I have webpack setup, i.e., with regards to having certain loaders, but I could be wrong.
Any help is appreciated.

Cannot use typescript class from other local typescript module using browserify

I have a common npm module containing TypeScript which is an node module providing some classes and functionality. This module is packaged via browserify + tsify and also exports the declaration files and built with gulp.
I have another npm module using TypeScript which imports this module locally via file:../modulename and tries to use functionality from the first module. The second module is also packaged via browserify + tsify and built with gulp. The compilation of the second module works via npx tsc, but fails if I execute the gulp build file with the error message
Error: Cannot find module './AbstractClass' from 'folderInOtherModuleContainingTheJSFiles'
Interestingly it sometimes fails with this Class sometimes with another, so it seems there is also some kind of concurrent processing.
I extracted the failing code from my project and created a minimal example with this behavior here.
npm version: 5.6.0
node version: v9.5.0
For anybody who might come to this post and face the same error.
I opened an issue at tsify too, thinking it has something to do with the plugin, because npx tsc worked.
Luckily the issue has been resolved, although with a workaround. There seems to be a name collision which causes browserify to think that a require call, which is a variable, in the resulting bundle needs to be resolved, but can't. The workaround is uglifying the resulting bundle, so that the conflict does not happen. More details in the above linked issue.

Visual Studio doesn't recognise imported npm package?

When importing npm packages into my project in Visual Studio, it always baffles me that sometimes, the packages just don't get recognised no matter how many times I refresh the folders.
The folder react-google-maps is definitely in my node_modules folder. However, for some reason, Visual Studio cannot see this error and highlights it as an error. And because of this, all relevant intellisense don't show up too. Strangely, it can actually recognise react!
What should I do to get Visual Studio to recognise new packages I just installed through npm in the console so that I can import them without the highlighted errors?
I beleive your issue is that react-google-maps is a JavaScript module. To let TypeScript import the module you need some typings translating JavaScript into TypeScript, e.g. from DefinitelyTyped repository.
A quick search found no such typings, why I'm assuming you didn't install any typings for this.
There are two solutions, if this is the case.
Write the typings and commit them to DefinitelyTyped or the Typings registry. This is the my recomended aproach. Give somthing back to the community by writing the typings and publishing it for others.
Declare a module in your project to silence the import. This one does not give you any IntelliSence, so it only silences the import.
To declare the module in your project, add a new file named react-google-maps.d.ts and paste this in:
declare module "react-google-maps" {
export var GoogleMap;
export var Marker;
}

How to use jsdoc in my script running on node.js?

I would like to use jsdoc module to extract documentation entries from some source code.
I have installed jsdoc module and I can use jsdoc in the command line.
But when I require("jsdoc") in my code, nodejs throws an error saying Cannot find module 'jsdoc'.
I have nodejs v0.8.25 and JSDoc 3.3.0-alpha2. It is installed both locally and globally.
I can use jsdoc command and I have jsdoc in my node_modules folder.
I cannot see where the problem is.
Where can I find some documentation about jsdoc other than how to use it in the command line interface or how to document js source code. I would like some API documentation.
I was looking to use jsdoc as a library too, and I stumbled on the same issue as you did.
You have done nothing wrong, it was just never intended to be used as a library.
There is an issue on the jsdoc's github project page relating to this. Hegemonic, the main contributor of JSDoc said:
JSDoc isn't really designed to be used as a library
You might want to express your desire to for creating an API for nodejs on the issue linked above.
The require('jsdoc') fails because there is no main field declared in the jsdoc's package.json. It might default to 'index.js' or 'main.js', but there is no such file either.
It sounds like you haven't installed jsdoc correctly. Run npm install -g jsdoc from your command line. If you run this inside a new terminal window that's in the default directory you shouldn't have any problems. I've had issues where I've tried to install a node module globally from my current working directory and for whatever reason the module doesn't install globally.
If it is about an automatic documentation tool in general, you could also use YUIDoc.
Following these three steps, you will have your automatic documentation:
Installing it: npm -g install yuidocjs
Format your comments regarding the YUIDoc Syntax Reference
In your console run yuidoc . on top of your JS source tree

Categories