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;
}
Related
We have several websites, each in its own project, and we are looking to migrate them all to using Vue.js. Each website has its own directory with .vue files that are then bundled using Webpack. We have a Webpack config in place that converts the .vue files, bundles, lints and pipes it all through babel and it works fine.
However, now that we have been moving things over for several weeks we have noticed that there are several components and core javascript files that are very similar and ideally we want to pull these out into a shared library of vue components and functions.
We have extracted several .vue into a folder alongside the websites, and put them together as a basic npm module with its own package.json, and include them using an npm file include, so in the package.json it just looks like: "vue-shared": "file:../CommonJavascript/Vue". Now when we try to use Webpack to build the bundle, we get the error:
ERROR in ../CommonJavascript/Vue/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'
I'm not sure where this error is coming from, because we aren't using react anywhere, and it seemed happy enough to build fine before we moved the files out. At the moment the only dependency in the shared module is moment, and it only contains 4 .vue, and a basic wrapper to bundle them up:
import button from 'Button.vue'
import loading from 'Loading.vue'
import modal from 'Modal.vue'
import progressBar from 'ProgressBar.vue'
export default {
button,
loading,
modal,
progressBar,
}
But, I was curious so I decided to add the package (even though we don't need it) to see if it would fix the issue, but I then get a new error:
ERROR in ../CommonJavascript/Vue/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "C:\Projects\Tmo\Code\CommonJavascript\Vue"
Now, that one makes a little more sense, we do use the babel runtime transform on the main project, but it isn't required by anything in the shared project and even if it was, surely the fact it is included in the main project means it should still build.
Partly, it seems perhaps I'm just not understanding the way npm resolves dependencies. It seems to be trying to now resolve some dependencies by looking in the shared files project and I dont know why. Also I have no idea where this strange dependency on eslint-plugin-react has come from.
So I guess this is a multi-part question. What is up with the way npm is trying to resolve the dependencies? Am I doing things right by moving the .vue files into a separate project, wrapping it up as a module and requiring it in the main project? and if not, what is the best way to have shared dependencies like this?
This was caused by a mixture of two separate issues:
The import statements didn't reference the file properly, the correct syntax is: import button from './Button.vue' (note the change to file path)
When you add a local package to npm via a path, it creates a symlink to the folder rather than copying the files over (this has been the behaviour since npm v5+). This then changes the way webpack tries to resolve dependencies since it then looks up from the location of the shared files to try and resolve dependencies including thing like eslint and babel.
The eslint-plugin-react dependency was because in visual studio code I had installed the eslint plugin, which it seems had created a .eslintrc file which reference the react plugin in my user folder (c:\users\<username>). Eslint will then use this as the default if it can't find a config file (which it couldn't because it was looking above the shared files because of the pathing issues described above)
We have decided we will be using a git submodule for these files going forward
I have been trying desperately for a month to figure out a way to get JavaScript intellisense to work for Aurelia in Visual Studio 2017. I know there is no definitions in npm #types. I tried to copy over the index.d.ts file from the local node_modules folders to a folder in the Salsa Cache at c:\Users\User\AppData\Local\Microsoft\Typescript\2.5\#types that is named the same as the Aurelia module, along with the package.json. It didn't work. I tried adding a jsconfig.json. Also didn't work. Is there anyone with Aurelia intellisense working in VS 2017????????
I'm not sure if this is applicable to your installation, but there is a known issue (https://github.com/jspm/jspm-cli/issues/1344) with type definitions when Aurelia is installed via jspm. The solution for now, unfortunately, is to also install Aurelia as a dev dependency via npm.
npm install --save-dev aurelia-framework aurelia-bootstrapper aurelia-pal-browser aurelia-polyfills
This takes up more space, but should resolve the issue until it's fixed properly.
So I have been using Visual Studio Code (vscode) when playing with some sample es6 projects.
My understanding is that in order to get intellisense to work properly with node modules, you need to include the typings of the projects that you're working on (Link here).
What I also understand is that you can have a typings.json file that stores all the "type definitions" and you run a typings install to retrieve all the typings.
This is all to get the intellisense working in vscode. What I am not sure is whether you should exclude this (typings folder and typings.json) from version control altogether?
At the moment I think that the editor should not influence the source code structure. I'm pretty sure that you should exclude the typings folder. I am not sure about typings.json. It could be useful for vscode users, but will most likely be pointless for WebStorm/Atom/Sublime/Vim users?
The content of the typings folder can easily be recreated by running typings install. If you have any kind of build process like webpack, browserify, gulp or similar, then you also need to have these definitions to be able to run the typescript compiler in your continuous integration system for example.
So you should commit the typings.json and add some npm postinstall scripts to automatically download the typings when you run npm install to be able to build your code in an automated way.
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
I've tried following these instructions:
https://code.visualstudio.com/Docs/runtimes/nodejs
I am not getting the green/red swiggly lines at all. Is there something I'm missing?
You can also see the same thing in this video:
https://youtu.be/sE8_bTEBlFg?t=1m37s
As far as I know, they're running the default editor. I've tried installing typings and typescript using npm. I've Followed that tutorial to get Javascript intellisense for node.js, but I fail to get either error/warning checking or any type information for node.js modules.
Is there a location the type files should be installed to in order to make them global to every JS project you create in VS Code?
OK, so I managed get get some code suggestions working after reading up online. Without using the whole Typings tools, I acquired node.d.ts (found it on my computer inside C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions) and placed that in my project's directory structure inside the ".vscode" folder. At the top of my .js file I added the following line:
/// <reference path=".vscode/node.d.ts" />
The code seems to be recognized now.
I read up on this tip here: How to Import Intellisense files into vsCode (Visual Studio Code)
If you are using ESLint and you have an .eslint.js file in the project root you also need the eslint dependency installed in the project. Otherwise, if there is a .eslint.js file but the ESLint dependency is not installed Visual Studio Code will report nothing in the editor.
Maybe you didn't use the -g flag to install them globally? Alternately, perhaps it's a missing jsconfig.json file?